字符串截取不改变原字符串vue动态设置img的src地址⽆效,npmrunbuild后不到⽂
件的解决
动态设置img的src属性⽆效，⽽直接写可以
解决办法：
imgSrc写成require('path')；
原因：
动态添加src被当做静态资源处理了，没有进⾏编译
npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND
解决办法：
进⼊：build⽂件夹 > 打开 f.js
到：output 对象
添加：publicPath：‘./'
具体写法：
publicPath: v.NODE_ENV === 'production'
'./' +config.build.assetsPublicPath
: './' + config.dev.assetsPublicPath
补充知识：解决：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 / f.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>
以上这篇vue 动态设置img的src地址⽆效,npm run build 后不到⽂件的解决就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。