1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。

解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。

时间:2024-06-22 10:14:54

相关推荐

解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。

问题描述及错误代码:

// 本地运行、打包 图片是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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。