Vue项目动态加载图片正确写法，

Vue项目动态加载图片正确写法，

目录

• 1. 错误的写法
• 2. 正确的实践写法
• 方法 1
• 方法2
• 附：vue中动态加载图片路径
• 方法一：（推荐）
• 方法二：
• 总结 

1. 错误的写法

以下情况运行异常，图片加载不出来

<img class="img" :src="imgSrc" />
<script>
let imgSrc = '../../assets/img1.png';
</script>

2. 正确的实践写法

方法 1

这时候需要换个写法，让编译时把图片加上去一起处理

原因：编译时webpack会将图片当成模块加载使用。然而上面第 1 点是动态的，loader无法解析图片路径，所以编译规则处理不了，所以加载时会找不到图片。

<img class="img" :src="imgSrc" />

<script>
import img1 from '../../assets/img1.png'
let imgSrc = img1;
</script>

方法2

把图片资源放到静态目录下static，引用的时候就直接是固定地址进行引用

assets 和 static 的区别：
assets：在项目编译的过程会被webpack处理解析为模块依赖，只支持相对路径的形式。
static：在static这个目录下文件不会被webpack处理和解析，webpack直接复制到最终的打包目录dist/static。必须使用绝对路径引用这些文件。

<img src="/static/img1.png" />

附：vue中动态加载图片路径

        在vue中加载图片路径跟我们不用框架引入路径是不同，在页面中使用的话，写的路径是可以生效的，但是我们想动态加载图片路径的话是不生效的。

这里有两种方法来解决：

方法一：（推荐）

1、页面上，绑定动态路径：

<img :src=" imgUrl "/> 

2、data里面：用   require(图片路径）

 data(){
      return{
        imgUrl:require('@/assets/img/mind/mind_5.svg');
    }
}

方法二：

把图片放到static，然后相对路径获取图片就好了

src: '../../../../static/images/docx.png'

总结 

到此这篇关于Vue项目动态加载图片正确写法的文章就介绍到这了,更多相关Vue动态加载图片内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• 基于vue 动态加载图片src的解决方法
• vue src动态加载请求获取图片的方法
• 解决Vue动态加载本地图片问题
• Vue动态加载图片在跨域时无法显示的问题及解决方法
• vue动态加载本地图片的处理方法
• Vue3的vite中图片动态加载3种方式