在用vue-cli脚手架生成的vue项目开发中，动态加载图片本地运行没有问题，但是打包后图片无法显示，图片路径404找不到，
相关代码如下：
<template>
<img :src="signalIconSrc['1']" class="basic-data-icon">
</template>
<script>
export default {
data() {
return {
signalIconSrc: {
1: '../../assets/images/xinhao-1@3x.png',
2: '../../assets/images/xinhao-2@3x.png',
3: '../../assets/images/xinhao-3@3x.png',
}
}
}
</script>
在解决这个问题之前，先来了解下vue-cli生成的vue项目是如何进行图片资源打包的
图片资源算是静态资源，而静态资源可以用两种方式进行处理
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在 static 目录下或通过绝对路径被引用(vue-cli3是public目录)。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
在vue的项目中，webpack使用的是vue-loader，在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。
而动态加载图片，图片的地址无法被解析，因此最终没有被打包到文件中，找不到该图片。
相对应静态资源的处理方式，解决问题的方法也有两种
- 用require将图片作为模块引入
signalIconSrc: {
1: require('../../assets/images/xinhao-1@3x.png'),
2: require('../../assets/images/xinhao-2@3x.png'),
3: require('../../assets/images/xinhao-3@3x.png'),
}
-
将图片放在static目录下(vue-cli3为public目录)，使用绝对路径引用
static目录
signalIconSrc: {
1: 'static/images/xinhao-1@3x.png',
2: 'static/images/xinhao-2@3x.png',
3: 'static/images/xinhao-3@3x.png',
}
