Vue3使用src动态引入本地图片的详细步骤

目录
  • 1. vue-cli搭建的项目
  • 2.vite搭建的项目动态引入本地图片
  • 补充:vue3加载动态图片
  • 总结

1. vue-cli搭建的项目

在项目中我们想要动态引入本地图片的时候,(注意这是在cli搭建的,vite里面没有require(),vite里面需要封装个工具)

  • 通过v-bind动态绑定
  • 通过的require引入

require作用

  • 用于引入模板、JSON、或本地文件

下面这种require直接包裹全部路径是可以的,但是我在想感觉不太优雅

想直接在src里用require(item.imageActive)这样思路是没有错的,但是require是引入路径这里我们需要给它拼接上路径(直接进行红字部分是错误的)

我们需要给它拼接一下,一定是不能直接传入变量,不然无法解析

这样就可以啦

不能直接require(item.path)

原因

参考资料: assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,加载图片模块通过webpackurl-loader加载器来实现,url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址,因此动态绑定src时要通过加载模块的方式去加载这个图片 使用require(“ ”)

 具体的话我现在还不是特别理解

还有vue-cli下assets和static文件夹的区别

(这个地方后面会去学习一下,我觉得要学一下webpack(个人拙见,我还不太了解QAQ))

2.vite搭建的项目动态引入本地图片

由于vite里面没有require(), 所以需要封装个工具

如下面这种工具(codewhy老师封装的,why老师yyds)再在引用一下就可以了

export const getAssetURL = (image) => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`../assets/img/${image}`, import.meta.url).href
}

完成

补充:vue3加载动态图片

一、动态加载图片

使用new URL(url, import.meta.url)

<template>
    <div class="home">
        <img :src="getImageUrl()" alt="" />
    </div>
</template>
<script lang="ts">
export default {
    name: 'HomeIndex',
    setup() {
        const getImageUrl = () => {
            // 里面可以根据需求写逻辑
            return new URL('../assets/img/home/container_bg.png', import.meta.url).href;
        };

        return { getImageUrl };
    },
};
</script>

二、动态加载背景图

2.1 style中设置

<template>
    <div
        class="container"
        :style="{
            background: 'url(' + getAssetsFile(true) + ') no-repeat',
            backgroundSize: '100% 100%',
        }"
    ></div>
</template>
<script lang="ts">
export default {
    name: 'HomeIndex',
    setup() {
        const getAssetsFile = (isAlarm: boolean) => {
            const url = isAlarm
                ? '../assets/img/monitor_alarm_bg.png'
                : '../assets/img/monitor_bg.png';
            return new URL(url, import.meta.url).href;
        };

        return { getAssetsFile };
    },
};
</script>
<style lang="scss">
.container {
    width: 300px;
    height: 100px;
}
</style>

2.2 修改class

<template>
    <div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    name: 'HomeIndex',
    setup() {
        const isAlarm = ref(true);
        const getAssetsFile = (isAlarm: boolean) => {
            const url = isAlarm
                ? '../assets/img/monitor_alarm_bg.png'
                : '../assets/img/monitor_bg.png';
            return new URL(url, import.meta.url).href;
        };

        return { getAssetsFile, isAlarm };
    },
};
</script>
<style lang="scss">
.container {
    width: 300px;
    height: 100px;
}
.monitor_normal {
    background: url(@/assets/img/monitor_bg.png) no-repeat;
    background-size: 100% 100%;
}

.monitor_alarm {
    background: url(@/assets/img/monitor_alarm_bg.png) no-repeat;
    background-size: 100% 100%;
}
</style>

总结

到此这篇关于Vue3使用src动态引入本地图片的文章就介绍到这了,更多相关Vue3 src动态引入本地图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3+TypeScript+Vite使用require动态引入图片等静态资源

    问题:Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源! 描述:今天在开发项目时(项目框架为Vue3+TypeScript+Vite)需要 动态引入静态资源,也就是img标签的src属性值为动态获取,按照以往的做法直接是require引入即可,如下代码: <img class="demo" :src="require(`../../../assets/image/${item.img}`)" /> 写上后

  • Vue3使用src动态引入本地图片的详细步骤

    目录 1. vue-cli搭建的项目 2.vite搭建的项目动态引入本地图片 补充:vue3加载动态图片 总结 1. vue-cli搭建的项目 在项目中我们想要动态引入本地图片的时候,(注意这是在cli搭建的,vite里面没有require(),vite里面需要封装个工具) 通过v-bind动态绑定 通过的require引入 require作用 用于引入模板.JSON.或本地文件 下面这种require直接包裹全部路径是可以的,但是我在想感觉不太优雅 想直接在src里用require(item.

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • v-for循环中使用require/import关键字引入本地图片的几种方式

    目录 问题描述 方式一(后端返回图片URL) 方式二(前端使用require) 方式三(前端使用import) 总结 问题描述 我们做项目中,常常需要把图片呈现到页面上,一般来说有以下几种方式 方式一(后端返回图片URL) 这种方式就是后端返回图片的url地址,我们直接img标签的src属性绑定imgUrl即可.如下代码: <div class="item" v-for="(item, index) in apiArr" :key="index&qu

  • Android用RecyclerView实现动态添加本地图片

    本文介绍了Android用RecyclerView实现动态添加本地图片,分享给大家,具体如下: 本文所用的多图选择的library来自:https://github.com/lovetuzitong/MultiImageSelector 简单介绍一下用法: 1.跳转到图片选择页面: Intent intent = new Intent(PassengerSetActivity.this, MultiImageSelectorActivity.class); intent.putExtra(Mul

  • 在maven中引入本地jar包的步骤

    目录 1 起因 2 解决方案 2.1 在pom中引入 2.2 Spring Boot 打包处理 2.3 拓展: Spring Boot 打包加入其它资源 1 起因 在和一些第三方厂商对接的过程中, 偶尔会遇到对方提供的SDK自带maven无法获取的jar包的情况(对于开源激进者的笔者很讨厌这种行为) 我们该如何处理这种情况呢, 其实解决思路很简单: 在pom中引入本地jar 打包时本地jar包含在内 让我们来看看具体怎么操作吧 idea中虽然可以在项目配置加入, 但打包时会报错, 相关的处理方案

  • [Android] 通过GridView仿微信动态添加本地图片示例代码

    前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲! 一. 实现效果 主要是通过点击+从本地相册中添加图片,同时显示图片至GridView.点击图片可以进行删除操作,同时界面中的发布EditView控件也很好看

  • Vue3解析markdown并实现代码高亮显示的详细步骤

    目录 具体实现步骤如下: 一.安装依赖库 二.在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令 三.在Vue组件中应用marked解析及实现代码高亮 四.显示效果 Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮.Vue的markdown解析库有很多,如markdown-it.vue-markdown-loader.marked.vue-markdown等.这些库都大同小异.这里选用的是marked,代码高亮的库选用的是high

  • Eclipse转Itellij IDEA导入Git/svn本地项目的详细步骤

    eclipse的代码提交到git,下载后用新的ide工具IJ 进行开发 一.导入项目 eclipse里有workSpace 但是在IDEA中没有,可以类比为project. eclipse里有workingset,可将不同的项目分组显示,IDEA里没有,可以按照文件夹形式做一个假的workingset. eclipse里没有moudle的概念,但是IDEA中有. 所以如何理解和操作IDEA中的[project]和[moudle]是关键 由于workSpace类比project,我们先建一个空的p

  • vue动态加载本地图片的处理方法

    发现问题 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个img标签在html中是这么写的: <img src="../images/demo.png"> 这种写法只能引用相对路径下的图片.不能使用绝对路径.使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理. 如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定. <img :src="src"> //data中

随机推荐