1、直接引用图片地址可以显示, 但如果直接使用变量，则会报错can not find module....

<img src="../../assets/images/message-on.svg">

<img :src="imgUrl">

imgUrl = '../../assets/images/message-on.svg'  // 不可行
imgUrl = require('../../assets/images/message-on.svg')  // 可行

或者
<img :src="require(imgUrl)">
imgUrl = '../../assets/images/message-on.svg'

2、当在某种场景下，想要动态替换掉图片，则会报错can not find module....

<img :src="require(imgUrl)">


imgUrl = '../../assets/images/message-on.svg' 
imgUrl = imgUrl.replace('on', 'off')  // 报错
修改成
<img :src="require('../../assets/images/' + imgUrl)">
imgUrl = 'message-on.svg'
imgUrl = imgUrl.replace('on', 'off')  // 不报错

记录一个关于Vue中img标签引入动态图片的问题的更多相关文章

  1. vue中的js引入图片，必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  2. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  3. vue中的js引入图片，使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  4. vue中el-upload上传多图片且携带参数，批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  5. vue中实现video的动态src绑定

    Vue中实现video的动态src 试了网上的$refs方法发现并没有用 解决方案: 通过require方法  <div>     <video :src='url' @click= ...

  6. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  7. Vue中img标签src属性绑定

    最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~ 我做的是一个基于Vue的信息资讯展示与管理平台,显示首页.详情页等的文章内容时就涉及到了图片展示,项目初始时我搭建的是静态网页结构, ...

  8. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  9. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  10. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

随机推荐

  1. 页面上多个audio只播放一个

    // ts版-vue private justPalyOne() { const audios = document.querySelectorAll("audio"); // 暂 ...

  2. ABC382

    上午 NOIP 太憋屈了,我要切水恢复一下信心( 希望 cy 别看见 A - Daily Cookie 在题目限制中,已经确定 \(S\) 中 @ 字符的个数多于 \(D\).所以我们直接数 . 的个 ...

  3. Jupyter虚拟环境创建和Deepseek API调用

    目录 创建运行环境 启动jupyter交互环境 调用Deepseek API 总结 "如果改变不了环境,那就改变自己去适应环境!" python的IDE和交互工具有很多,本人开发p ...

  4. SciTech-AV-Audio-DAP(Digital Audio Processing)-Perceived Loudness(感知响度)-EBU R 128 / ITU-R Bs.1770-4

    Perceived Loudness (EBU R 128) EBU: European Broadcasting Union Example of Implementation(Source Cod ...

  5. SciTech-Math-Complex Analysis复分析: Complex复数 + De Moivre's Formula:帝魔服公式 + Euler's Formula:欧拉公式

    https://www.desmos.com/calculator/v1nugr08y5 https://mathvault.ca/euler-formula/ https://www.britann ...

  6. GROOVY 特征（继承，重写）

    class Example { static void main(String[] args) { Student st = new Student(); st.StudentID = 1; // p ...

  7. 完全使用TRAE和AI 开发一款完整的应用----第一周

    虽然也在工作使用使用ai 补全代码或者完善代码,但还是没有完全使用ai 做一款应用,不依赖手工编程.不依赖人查找资料 所以决定自己写一个应用玩玩,感受一下全完使用ai开发一款应用的乐趣, 跟上时代发展 ...

  8. 职场生存指南：如何优雅应对"双面人"同事

    在职场丛林中,有一种人如同变色龙般难以捉摸--他们表面热情友善,背后却暗藏算计.与这类"双面人"同事周旋,不仅考验智慧,更是一场心理博弈.掌握以下策略,让你在保持职业风度的同时,巧 ...

  9. PostgreSQL 约束

    NOT NULL 约束: 默认情况下,列可以保存为 NULL 值.如果您不想某列有 NULL 值,那么需要在该列上定义此约束,指定在该列上不允许 NULL 值. NULL 与没有数据是不一样的,它代表 ...

  10. linux服务器更换主板后无法识别网卡(网卡启动失败)解决办法

    在我的超算集群里,有台服务器故障报修,主板坏了,更换主板后,无法识别网卡,用命令ifconfig -a 查看只显示lo loopback 127.0.0.1,以及eth7,eth8,eth9等没有网卡 ...