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 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
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
php 远程关机操作的代码
2008/12/05 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
javascript 动态添加表格行
2006/06/22 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python实现日常记账本小程序
2018/03/10 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python的argparse库使用详解
2018/10/09 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
2014年学习委员工作总结
2014/11/14 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
golang中的并发和并行
2021/05/08 Golang
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
python 镜像环境搭建总结
2022/09/23 Python