解决：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>

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

npm run build 打包后，如何运行在本地查看效果
目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...
vue项目npm run build后如何在本地查看效果
因为在本人实际开发过程中,遇到过这样的问题--部署到生产环境中的页面样式和本地开发环境中的样式差异巨大, 所以需要通过npm run build打包后,直接在本地查看效果,以便于及时将这些样式冲突类的 ...
vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
在vue项目npm run build后，index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
vue2.0项目部署到服务器_vue项目运行npm run build打包后如何发布到服务器？
运行npm run build后,怎么发布到服务器? 这样就打包成功了.然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放img.css.js等文件)和index.html. ...
npm run build 打包后页面无法显示问题
今早运维小哥哥跑来找我,想给我的新项目发个版,我还是按照一般流程npm run build 然后git提交,打个tag v1.0.1,运维小哥哥说你前端页面没写好嘛? emmmm-.老娘早就写好了.肯 ...
vue项目使用 npm run build 打包后出现样式错乱问题解决方法
检查组件内的标签是不是没有加scoped 不加scoped打包后容易引起样式错乱正确规范应该这样 scoped 作用style样式只在本组件内有效,防止别组件类名或标签一样样式冲突.
【vue】npm run build打包路径问题
直接插入主体额不主题我的vue脚手架目录结构如下有个config文件夹,在index.js中有两个方法一个开发dev,一个生产build. dev: 是我们的开发环境,资源使用绝对路径,所以可 ...
vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹正常情况下static文件夹是非常干净的如果你发现你的static文件夹出现了多余的img.fonts ...

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

问题描述及错误代码：

解决办法：

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

最新文章

热门文章