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

最新推荐文章于 2024-05-16 12:19:20 发布
最新推荐文章于 2024-05-16 12:19:20 发布
阅读量1.2w 收藏 19
点赞数 7
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37161741/article/details/106123270
版权

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

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

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

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

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

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

PairsNightRain
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue获取img下的内容_vue中img的src动态赋值（本地图片的路径）
weixin_34486302的博客
12-29 4920
问题&原因1.问题：img的src属性直接绑定url变量，然而图片加载失败2.原因：在webpack中会将图片图片来当做模块来用url-loader将直接将:src=" '../../assets/images/'+item.url+'.jpg' "解析成字符串，因为是动态加载的，所有无法解析图片地址然后npm run dev 或者npm run build之后导致路径没有被加工【被web...
VUE-使用img标签时，+require动态设置图片地址
LzzMandy的博客
06-22 8092
<div class="selector"> <img src="/images/one.png""/> </div> 用上面这种方式时，图片会显示出来，但有时间我们需要根据一个标志来设置具显示的哪一张图片，如下： //dom 部分 <div class="selector"> <img :src="flag?...
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值
最新发布
2401_84437095的博客
05-16 703
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分截图：常见情景2。
动态给img的src属性赋值&Vue中通过document的getElementById()获取为空&Vue输入框中使用v-model导致number类型值自动转换成string
weixin_51097961的博客
07-03 3394
动态给img的src赋值&Vue中通过document的getElementById()(在使用canvas是用到)
vue中img的src动态赋值（require方法）
qq_45991812的博客
02-06 9798
【代码】vue中img的src动态赋值（require方法）
img图片的src分别在vue2、vue3项目中如何动态赋值？
qq_41238459的博客
12-21 3307
浅谈img图片src在vue2、vue3项目中动态赋值问题
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决...
解决Vue动态加载本地图片问题
10-16
首先，我们遇到的问题是当尝试使用`v-bind`（简写为`: `）动态绑定`img`标签的`src`属性时，图片无法正常显示。原因是浏览器没有正确解析图片路径，而是将其作为字符串显示。这是因为Vue编译时没有处理相对路径，...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
<img :src="imageUrl" alt="动态图片"> ``` 这里的`imageUrl`是我们将在Vue实例的`data`选项中定义的属性。 接下来，我们需要在Vue实例的`data`函数中声明这个`imageUrl`，并提供初始值。通常，如果图片路径不是从...
前端vue-cli项目中使用img图片和background背景图的几种方法
10-16
在Vue组件的`data`对象中，可以使用`import`语句导入图片，然后将其赋值给需要使用的变量。这种方式适用于需要动态设置背景图片的情况。 示例代码： ```javascript import bgImg from '@/../static/images/logo...
Vue触发input选取文件点击事件操作
10-14
如果文件有效，那么将文件信息保存在`imgInfo`对象中，并使用`FileReader`读取文件内容，将其转换为Base64编码的URL，然后赋值给`imgSrc`，以便在界面上预览所选图片。 关于Vue的懒加载和文件打包，这里提到了在Vue...
在vue中为什么img动态src地址要加require，三目运算符
m0_64380162的博客
08-05 2040
来动态加载图片资源的情况通常是在模块化的环境下，特别是在单文件组件中。在vue中使用三元运算符计算src动态来绑定图片地址的时候会不显示，这是因为vue使用的是webpack来进行打包的，从而不能正确的找到地址。语法，或者在某些情况下，甚至可以直接使用图片的相对路径。: webpack 可以根据配置对图片进行压缩和优化，从而减小应用的总体积，提高加载速度。可以将图片资源作为模块引入，从而可以在代码中更方便地操作和管理这些资源。需要注意的是，随着前端技术的不断发展，尤其是在 Vue 3 中，使用。
img动态src地址要加require
haohaoxueqd的博客
11-08 1486
img 动态src 写require
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}} ...
vue3+vite 在v-for中对img的:src属性动态赋值，打包后图片不显示的问题
weixin_45825274的博客
03-06 1317
vue+vite，当需要把静态资源图片路径动态赋值img的:src属性时，打包后图片加载不出来的问题
关于在vue项目中img的src动态赋值问题
筱✿熙
04-20 1460
2.使用require，只能有一个变量（比如有多个变量，有运算，有方法，都不行）。vue项目中img的属性src动态赋值时。1.一般动态赋值时，要用require；正确编写如下图所示（容易被坑的地方）
vue img src 动态赋值 src根据判断选择图片
06-01
你可以使用条件语句来选择图片的路径，例如： ```html <template> <div> <img :src="imageUrl" alt=""> </div> </template> <script> export default { data() { return { isBig: true } }, computed: { imageUrl() { if (this.isBig) { return require('@/assets/images/big.jpg') } else { return require('@/assets/images/small.jpg') } } } } </script> ``` 在上述代码中，我们使用了 `require` 函数来加载图片资源，根据 `isBig` 变量的值来选择不同的图片路径。当 `isBig` 为 `true` 时，图片路径为 `@/assets/images/big.jpg`，否则图片路径为 `@/assets/images/small.jpg`。注意，在使用 `require` 函数加载图片时，需要使用 `@` 符号来代表 `src` 目录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值