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动态加载图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！