vue 动态设置img的src地址无效,npm run build 后找不到文件的解决


Posted in Javascript onJuly 26, 2020

动态设置img的src属性无效,而直接写可以

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

解决办法:

imgSrc写成require('path');

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

原因:

动态添加src被当做静态资源处理了,没有进行编译

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND

解决办法:

进入:build文件夹 > 打开 webpack.prod.conf.js

找到:output 对象

添加:publicPath:‘./'

具体写法:

publicPath: process.env.NODE_ENV === 'production'
 ? './' +config.build.assetsPublicPath
 : './' + config.dev.assetsPublicPath

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

补充知识:解决: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 动态设置img的src地址无效,npm run build 后找不到文件的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
常用的javascript设计模式
Jan 11 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue动态设置img的src路径实例
Sep 18 Javascript
vue实现图书管理系统
Dec 29 Vue.js
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
You might like
建站常用13种PHP开源CMS比较
2009/08/23 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
JS实现随机点名器
2020/04/12 Javascript
python Django框架实现自定义表单提交
2016/03/25 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python之django母板页面的使用
2018/07/03 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
单位委托书怎么写
2014/08/02 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
区域经理岗位职责
2015/02/02 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL