vue中img属性绑定src两种解决方法

最新推荐文章于 2025-06-23 16:52:49 发布
最新推荐文章于 2025-06-23 16:52:49 发布
阅读量1w 收藏 9
点赞数 8
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue中src属性绑定问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Monster_X/article/details/87989902
本文介绍在Vue项目中，图片不显示的常见问题及两种有效解决方案。第一种方案是将图片移动至static文件夹，第二种方案是在组件中使用require加载图片路径。这两种方法都能确保图片在项目中正确显示。

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

说明：

  1. 当图片中src文件夹下assets内时，我们直接在Dom中以img插入时，图片是可以正常显示，没有问题的。
  2. 但是，现在我说的情况是我们在data中以数组形式遍历出来时遇到的图片不显示的问题，以下为两种解决方案，大家自行选择。

方法一：移动目标图片到static文件夹下
在这里插入图片描述

<img :src="banner.imgUrl" :alt="banner.name" style="height:360px">

此时图片可以正确显示（比较省心，直接移动图片就行）

方法二：requir(图片原本路径)
在这里插入图片描述

<img :src="banner.imgUrl" :alt="banner.name" style="height:360px">

正常显示，没毛病！
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3-vite给img标签的src动态绑定图片路径
孑然的个人博客
07-31 2317
【代码】vue3-vite给img标签的src动态绑定图片路径。
vue img src 动态赋值
计算机辅助工程
06-23 517
标签的src属性赋值通常是通过数据绑定来实现的。你可以使用插值{{ }}，或者v-bind:src（简写为:src）来实现这一点。下面是一些示例来说明如何动态赋值给。标签的src属性赋值。你可以根据实际情况选择最适合你的方法。方法2：使用v-bind:src或:src。以上方法展示了如何在Vue中动态地给。动态从数据属性中获取URL。使用计算属性动态生成URL。在Vue中，动态地给。
Vue | 动态绑定img的src属性
Tuan_Better的博客
01-18 1785
方法：字符串URL前加上require。
Vue 动态绑定 img src中的数据
qwq2867309085qwq的博客
10-17 1000
Vue 动态绑定 img src中的数据
vue中img动态绑定src(网络图片https,http)
weixin_43608950的博客
04-28 6462
vue中img动态绑定src(网络图片https,http)
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
4. 将动态生成的图片路径绑定到页面上：在Vue模板中，使用`v-bind`或简写为`:`的语法来绑定图片的`src`属性。例如： ```html <img :src="fullUrl" alt="天气图标" /> ``` 这样，当`twCode`变化时，`fullUrl`计算...
vue src动态加载请求获取图片的方法
10-17
在Vue组件的模板中，使用`<img>`标签的`src`属性绑定到`formData.avatar`，确保图片可以被正确渲染： ```html <img :src="formData.avatar" alt=""> ``` 二、加载请求获取到的图片 1. **配置Webpack**： ...
vue给input file绑定函数获取当前上传的对象完美实现方法
08-28
关于事件监听器的写法，Vue提供了两种，`v-on:change`和`v-on="change:xxx"`。前者是目前推荐的写法，后者是旧版本的写法，已经被废弃，现在的新版Vue文档中已经不再推荐使用。 总的来说，通过以上方法，我们可以在...
在Vue项目中如何利用v-for循环给img标签动态绑定src属性，以加载不同的图片资源？
11-10
以下将介绍如何在Vue中利用v-for实现这一功能，主要涉及两种常见情况：给Radio标签添加`label`属性和给img标签添加`src`属性。对于img标签，动态设置`src`属性时，需要注意Vue不支持直接使用相对路径，因为它需要的...
vite+vue3项目中得img标签src属性的动态绑定
最新发布
06-26
总结：在Vite+Vue3项目中，动态绑定img的src属性，推荐以下方法：1.对于assets目录下的图片，使用import.meta.glob（图片较多）或提前import并映射（图片较少）。2.对于public目录下的图片，使用newURL()或直接使用...
Vue中img的src属性绑定与static文件夹实例
08-30
本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
【Vue】在vue-cli中绑定图片src属性
AC_greener的博客
08-12 1234
git推送项目到github的方法 在推送之前要配置一下git的用户名和邮箱（和github的邮箱一致） git config user.name “XXX” git config user.email “XXX@XXX.com” 在本地新建一个文件夹，进入文件夹，在命令行执行: git init 执行 git remote add origin https://github....
vue2.0中动态绑定img的src属性的方法（三元运算）
simpleMan8023的博客
07-08 2424
函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */
vue 绑定＜img src 的办法
QWDWQWQ的博客
04-25 796
前言 用vue绑定 img src图片资源地址时候 由于地址需要加双引号 因此不能直接绑定需要这样： 如此便可以绑定上数据源地址并遍历出来 <a href="site/profile.html"> <img :src="(`${dp.user.headerUrl}`)" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;"> </a> ...
VUE3语法--img图片不显示/img的src动态赋值图片显示
热门推荐
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
Vue中的img标签对src属性使用动态绑定问题——两种方法
weixin_42782272的博客
04-13 1万+
方法一： 正常来说，一些图片的资源我们会放在src文件夹的asset文件夹中。 这样的话将src属性写死是没有问题的。 但是如果想使用动态绑定就需要在根目录的public文件夹下新建一个static文件夹用来存储静态文件。 这样就可以直接访问到了。 <img :src="'/static/' + item.label.split(' ')[0].toLowerCase() + '.png'" :alt="item.label" style="width: 100%; height: 100
vue项目img标签动态绑定src问题解决
qq_41859063的博客
11-08 2875
vue项目img标签动态绑定src问题解决
vue中imgsrc属性绑定问题
lsklike的博客
08-17 427
vue中imgsrc属性绑定问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值