当前位置: 首页 > news >正文

vue+webpack 在引入图片以及在img引用变量名的本地图片报错

vue 在style:background-image中引入图片以及在img引用变量名的本地图片

因为项目用了vue-cli,直接写本地路径会有问题

<img :src="'@/assets/images/activity/double9/coupon'+item.price+'.png'">
复制代码

编译后是 <img data-v-0343f1f6="" src="@/assets/images/activity/double9/coupon80.png">

路径没有加上hash,而编译后的图片文件是被加上hash的,所以引用失败

正确写法:

<img :src="require('@/assets/images/activity/double9/coupon'+item.price*10+'.png')">
或者
<img :src="activityImg"
let activityImg = require("./assets/images/activity/double9/popup-double9.png");
复制代码

这种写法可以正确引用带hash的图片路径

动态require 变量替代require中的路径参数报错

采用上述方法require图片成功,但如果想用变量替代require中的参数,会报错

.js
this.imgUrl='@/assets/images/no-result.png'
this.imgUrlFile=require(this.imgUrl)
.tpl
<img :src="require(imgUrl)">
<img :src="imgUrlFile">
// #2种写法都找不到图片,浏览器显示<img data-v-71871f69="" src="">
复制代码

官方文档:如果你的 request 含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入。

原因:

  • webpack本身是一个预编译的打包工具,无法预测未知变量路径 不能require纯变量路径
  • require(path) ,path 至少要有三部分组成, 目录+文件名+后缀
  • 目录 => webpack 才知道从哪里开始查找
  • 后缀 => 文件后缀,必须要加上,不然会报错
  • 文件名 => 可用变量表示

解决:

// # 变量名加字符串 编译成功
this.imgUrl='images/no-result.png'
 <img :src="require('@/assets/'+imgUrl+'.png')">
复制代码

或者定义require.context()

转载于:https://juejin.im/post/5bbeb8106fb9a05d035bfbc7

相关文章:

  • android选择图片或拍照图片上传到服务器(包括上传参数) (转)
  • 你应该了解的大数据10个新趋势
  • js编写倒计时-距离开始时间距离结束时间-结束
  • in, out, ref
  • 以太坊 ERC223 标准与 ERC20 的区别是什么?
  • 7、请求参数接收
  • iPhone的指纹识别与面部识别(FaceID)
  • 状态模式与外观模式的碰撞
  • 【hdoj】1358 Period【字符串--最小循环节 i/next[i]即为其长度】
  • Cracking The Coding Interview 3.6
  • 爬虫原理与数据抓取----- urllib2:GET请求和POST请求
  • 算法导论读书笔记(2)
  • Java中的基本类型和包装类
  • 用jquery-easyui中的combotree实现树形结构的选择
  • Oracle推出轻量级Java微服务框架Helidon
  • 10个确保微服务与容器安全的最佳实践
  • Fundebug计费标准解释:事件数是如何定义的?
  • gulp 教程
  • input实现文字超出省略号功能
  • Java 最常见的 200+ 面试题:面试必备
  • mysql innodb 索引使用指南
  • Spark学习笔记之相关记录
  • supervisor 永不挂掉的进程 安装以及使用
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • Transformer-XL: Unleashing the Potential of Attention Models
  • Wamp集成环境 添加PHP的新版本
  • 关于List、List?、ListObject的区别
  • 力扣(LeetCode)357
  • 如何用Ubuntu和Xen来设置Kubernetes?
  • 三栏布局总结
  • 删除表内多余的重复数据
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 微服务框架lagom
  • 译自由幺半群
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​flutter 代码混淆
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (python)数据结构---字典
  • (分类)KNN算法- 参数调优
  • (附源码)ssm码农论坛 毕业设计 231126
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)负载均衡,回话保持,cookie
  • .net 4.0发布后不能正常显示图片问题
  • .NET MVC第五章、模型绑定获取表单数据
  • .Net(C#)自定义WinForm控件之小结篇
  • .net6+aspose.words导出word并转pdf
  • @EnableConfigurationProperties注解使用
  • [ActionScript][AS3]小小笔记