VUE3语法--img图片不显示/img的src动态赋值图片显示

已于 2024-04-15 11:20:10 修改
阅读量2w 收藏 31
点赞数 35
CC 4.0 BY-SA版权
分类专栏： Java项目应用 文章标签： vue.js javascript 前端
于 2023-11-27 09:36:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tangshiyilang/article/details/134637734

1、问题概述

实测有效

图片终于能显示出来了！

常见情景1：在VUE中使用img显示图片的时候，通过传参的方式传入图片的路径和名称，VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源，从而出现了图片无法显示的情况。

常见情景2：针对上述的问题，我们有些人会使用require函数去设置程序，告诉VUE你加载资源的时候加载本地资源，这个时候回报错：VUE使用require报错：Uncaught Error: cannot module ‘asstes/logo.png’

2、常规的使用图片方式

1、<img src=”../images/1.png” />

2、<img src=

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue3 -- 加载本地静态资源
King Saj
04-07 2188
打包图片资源，在 dist 文件夹中就可以看到这个图片（如果图片较小会打包进代码中变为 base64 引入）。
Vue.js 动态为img的src赋值方法
11-28
需求是这样： ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "time": "2015-08-11" }, { "amount": 100, "sex": "female", "fee": 0, "id": 8, "status": 2, "time": "2015-06-12" }] }
vue3项目使用指令方式修改img标签的src地址
最新发布
10-11 369
摘要：为解决项目中使用HTTPS访问摄像头扫码功能时，静态资源链接需从HTTP转为HTTPS的问题，提供了四种Vue.js解决方案：1)全局组件替换所有img标签；2)创建指令修改img的src属性；3)使用带参数的指令；4)支持修饰符的指令。其中方案3（指令参数）最为推荐，因其语义明确、避免属性冲突且易于扩展，能自动处理静态和动态URL的转换，无需大规模修改现有代码结构。该方案有效平衡了HTTPS需求与最小化代码改动的要求。
Vue 为图片赋值动态地址
asing1elife's blog
10-18 3209
Vue 的 的 src 属性在赋值时，如果是静态内容可以直接指定，但动态内容则不行 更多精彩 更多技术博客，请移步 asing1elife’s blog 静态指定的方式 一般静态指定时，会将图片放在相同路径下，然后通过绝对路径进行指定 &amp;lt;mt-header fixed&amp;gt; &amp;lt;img class=&quot;logo&quot; src=&quot;./images/logo.
vue中当图片地址无效的时候，显示默认图片
小圣贤君的博客
01-25 9640
web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。 对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。 :src="item.img" @error="imgError(item)" /> 给图片添
vue判断图片是否可用访问，不能访问就重新获取
a506602491的专栏
09-16 1312
vue判断图片是否可用访问，不能访问就重新获取
vue3图片展示实战
an_gentle_killer的博客
04-21 1026
vue3 图片展示
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 6136
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值
m0_61068088的博客
04-18 2092
【代码】VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值。
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值(1)
2401_84437095的博客
05-16 1482
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
解决vue v-for src 图片路径问题 404
10-16
本篇分享将详细讲解如何在Vue中使用v-for循环时正确设置图片src路径，以及如何处理图片资源加载失败的问题。 首先，需要明白的是，在Vue中使用v-for指令时，图片资源的路径不能仅作为字符串处理，因为webpack在构建...
vue template中slot-scope/scope的使用方法
10-18
在 Vue 2.5.0 及更高版本中，引入了一个新的特性——`slot-scope`（后来在 Vue 3 中被 `v-slot` 替代），用于在父组件中动态地传递数据到子组件的插槽内。`slot-scope` 或 `scope` 关键字允许我们在子组件的插槽内...
Vue动态赋值img标签时为何图片不显示？
09-03
在Vue中动态赋值img标签时图片不显示，可能有以下几种原因： ### 路径问题 1. **相对路径错误**：如果使用相对路径，要确保路径相对于当前HTML文件的位置是正确的。在Vue项目中，相对路径可能会因为打包工具的处理...
vue3+vite 在v-for中对img的:src属性动态赋值，打包后图片不显示的问题
weixin_45825274的博客
03-06 1968
vue+vite，当需要把静态资源图片路径动态赋值img的:src属性时，打包后图片加载不出来的问题
关于img的src动态赋值图片不显示的问题
Collapsar_的博客
01-24 2217
关于img的src动态赋值图片不显示的问题。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾林小妖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值