问题描述及错误代码:
// 本地运行、打包 图片是ok的<img src="../../static/images/orderSeeProgress0.png">// 本地运行 图片是ok的、打包图片找不到 (因为图片的路径被解析成了字符串)<img src="/static/images/orderSeeProgress1.png"> // 本地运行 图片是ok的、打包图片找不到 (因为图片的路径被解析成了字符串)<img :src="'../../static/images/orderSeeProgress'+index+'.png'">
解决办法:
(1)如果使用的是静态图片,切路径地址不会改变,那就直接使用src如下方法:(相对路径的)
// 本地运行、打包 图片是ok的<img src="../../static/images/orderSeeProgress0.png">
(2)如果图片是根据数据动态变化的,那么就得使用:src( 动态改变src的值)
(2-1)首先在配置文件里面给static文件起个别名:(我起得别名是@@)
build /webpack.base.conf.js 配置别名如下:
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'@@': resolve('static'),}},
(2-2)引入图片地址,然后在data里面定义,在 :src里面使用。
// 这样使用: 本地、打包后 图片都是ok的。<img :src="orderPro1Img" /><img :src="orderPro2Img" /><script>import orderPro1 from '@@/images/orderSeeProgress0.png'import orderPro2 from '@@/images/orderSeeProgress1.png'export default {data() {return {msg: '',index:0,orderPro1Img:orderPro1,orderPro2Img:orderPro2}},}</script>