vue动态赋值img的src，用require()

最新推荐文章于 2025-06-23 16:52:49 发布
最新推荐文章于 2025-06-23 16:52:49 发布
阅读量1.2w 收藏 20
点赞数 7
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37161741/article/details/106123270
本文探讨了在前端开发中如何解决动态图片加载的问题。通过使用Webpack的url-loader，可以将图片作为模块加载，实现动态图片路径的正确解析。文章还提到了使用require()方法进行动态图片加载的有效性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先，单独一个src是可以的

<img src="../../assets/logo.png" alt="图片" />

在这里插入图片描述
数组是这样的
在这里插入图片描述
想改为动态赋值的形式就实现不了

<img :src="item.img" alt="图片" />

所以改为如下：
在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，将图片作为模块加载进去,用require()就可以了
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
想看更多内容也可以关注我的微信公众号：傻傻是个前端程序猿
在这里插入图片描述

VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
Vue数据绑定img标签的src属性，需要用require包裹
热门推荐
qq_38134913的博客
09-23 1万+
vue里面将img标签的src属性动态绑定到一个数组上，发现:src=’ '并没有软用，查了一些文章，终于发现是要用require包裹起来才行！ <template> <div > <div v-for="item in img_list" :key="item.index"> {{item.title}} ...
vue中img的src动态赋值（require方法）
qq_45991812的博客
02-06 1万+
【代码】vue中img的src动态赋值（require方法）
vue img src 动态赋值
最新发布
计算机辅助工程
06-23 502
标签的src属性赋值通常是通过数据绑定来实现的。你可以使用插值{{ }}，或者v-bind:src（简写为:src）来实现这一点。下面是一些示例来说明如何动态赋值给。标签的src属性赋值。你可以根据实际情况选择最适合你的方法。方法2：使用v-bind:src或:src。以上方法展示了如何在Vue中动态地给。动态从数据属性中获取URL。使用计算属性动态生成URL。在Vue中，动态地给。
Vue里面如果用代码控制img，src必须用require(路径)，而不能直接使用src=路径的方式
pon的博客
03-31 6233
HTML的img标签的src是有两种, 绝对路径/相对路径, 相对路径可以转成绝对路径 比如: http(s)????/www.baidu.com/test.jpg 前面http(s)????/www.baidu.com 指明那一台Web服务器, /test.jpg是相对于服务器所设置的根目录, 比如\www\picture, 所以这里的寻址是相对于web服务器所设置的根目录的 那么问题是为什么到了Vue里面......
在vue中为什么img动态src地址要加require，三目运算符
m0_64380162的博客
08-05 2468
来动态加载图片资源的情况通常是在模块化的环境下，特别是在单文件组件中。在vue中使用三元运算符计算src动态来绑定图片地址的时候会不显示，这是因为vue使用的是webpack来进行打包的，从而不能正确的找到地址。语法，或者在某些情况下，甚至可以直接使用图片的相对路径。: webpack 可以根据配置对图片进行压缩和优化，从而减小应用的总体积，提高加载速度。可以将图片资源作为模块引入，从而可以在代码中更方便地操作和管理这些资源。需要注意的是，随着前端技术的不断发展，尤其是在 Vue 3 中，使用。
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决...
【Vue】img使用 :src 动态绑定图片地址，但是加载图片不成功
weixin_57509111的博客
05-20 1692
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。引入才能成功，就可以动态使用了。设置绝对路径或者相对路径是改为用。动态地址，路径被加载器解析为。
vue中使用for循环生成img但是src 无效的问题 解决 require
preserveXing的博客
12-01 1447
1. 使用情况一:直接把src的值写在img中 代码样式 <ul> <li > <img :src="./src/img/1.jpg" alt=""> //按照你图片存放的路径 </li> </ul> 这样写完全没有问题 他会找到图片并进行显示 2. 使用情况二:把vue中data的src的值写在img中 <ul> <li v-for="(item,index) in n
vue img src 动态赋值 src根据判断选择图片
06-01
你可以使用条件语句来选择图片的路径，例如： ... <img :src="imageUrl" alt=""> export default { ... return require('@/assets/...注意，在使用 `require` 函数加载图片时，需要使用 `@` 符号来代表 `src` 目录。
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中 使用require 获取动态的src属性
qq_44917015的博客
05-24 1418
<img :src='getStatisticImgSrc'@click="jumplink" /> get getStatisticImgSrc(){ let color = this.$store.state.theme.toLowerCase(); return require(`../../assets/Img/CloudeFirstPage/${color}/statistic.png`); } 这样src属性中获取的图片 才能可以被webpack编译 才能.
VUE中的img的:src动态加载图片的问题，require也不能随便用
曾某人的博客
09-22 8262
问题描述： 写的一个系统，用户登录后会使用数据库的数据作为用户头像，需要显示在页面上，那头像链接就需要用变量表示，那就用到了:src做动态绑定，直接加变量 问题解决： 1、使用require 由于我们在写代码用的链接是编译前的，编译后图片文件，require中直接写死是没有错误的（里面全是字符串的话），但是如果只用一个变量，就会报错 2、使用require的小技巧 查找到了一篇有用的教程——前端es6 require动态引入图片报错Error: Cannot find module ，“因为require它
Vue中用src引入图片404，用require引入可以加载
larea的博客
03-01 577
通过 require 引入即可加载图片。
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值
m0_61068088的博客
04-18 2030
【代码】VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值。
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值(1)
2401_84437095的博客
05-16 1418
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue项目中img的src动态赋值
左直拳的马桶_日用桶
10-31 5533
一般这个动态赋值，要用require。而且，这个require里，只能有一个变量，多个变量，有运算，有方法，都不行。没想到这破东西，居然这么折腾人。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值