vue 应用：实现Vue项目动态加载图片

分享一个vue 应用：实现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'