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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
javascript中的面向对象
Mar 30 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
大师制作的中短波矿石收音机
2020/04/02 无线电
德劲1104的电路分析与改良
2021/03/01 无线电
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python退出循环的方法
2020/06/18 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
教师个人自我鉴定
2014/02/08 职场文书
中式婚礼主持词
2014/03/13 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
四十九个javascript小知识实用技巧
2021/11/20 Javascript