vue3项目使用＜img :src=““ /＞动态加载图片

最新推荐文章于 2024-08-30 17:33:11 发布
最新推荐文章于 2024-08-30 17:33:11 发布
阅读量1.2k 收藏 1
点赞数 17
分类专栏： 学习笔记 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68443051/article/details/137963293
版权

分享一下使用<img :src="" />动态加载图片时遇到的问题以及解决方法。

下面是部分页面代码，这里我使用了<img :src="itemc.headUrl" />来动态加载图片

这时遇到了问题，因为这里的itemc.headUrl是图片的相对路径：../assets/images/AI.png，页面无法显示图片。

接着我试着使用require(`../assets/images/AI.png`)来解决，但是控制台看到报错了：SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=25d5f2e9' does not provide an export named 'require'。所以该方法无法解决我的问题。

最后，使用new URL(url, import.meta.url).href （第一个url为图片的相对路径）解决了问题：

headUrl: new URL(url, import.meta.url).href

俺不会敲代码啊啊啊
关注
专栏目录
VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue3动态引入图片(:src)
Mr-yang的随笔
10-27 7844
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
vue3: img标签src属性动态设置资源路径
XL_0502的博客
08-16 2748
vite中默认支持ESM方式加载模块，没有require相关方法。补充两个方法。方法 require()Node.JS 原生方法 ，以CommonJS方式加载模块/文件/图片；Webpack 默认支持 ，Vite不支持；方法 require.context()Webpack 特定方法，此方法可实现自定义上下文；Vite不支持；
vue3 快速入门 (三) : vue中的图片路径
朱豪凯的博客
07-17 2064
介绍在Vue3中，引用图片路径的3种方式
Vue 3使用vite 2.0 动态引入加载图片 :src，解决方法超级简单
热门推荐
weixin_44717047的博客
08-21 3万+
Vue 3使用vite 2.0 动态引入图片 :src
前端开发攻略---三种方法解决Vue3图片动态引入问题
nibabaoo的博客
05-24 4021
解决Vue3图片动态引入问题
vue3动态图片src
m0_38135164的博客
05-22 408
const inactiveIcon = new URL(`assets/images/radio.png`, import.meta.url).href;vue2：require（）
vue动态加载图片src
qq_41818857的博客
05-07 765
场景描述 我需要根据后台返回的某个字段标示渲染某个图片，也就是src的路径是动态的不是写死的 放在assets目录 错误写法： <img :src="./assets/images/'+item+'.jpg' " /> 结果不起作用，其实不是不可以放在assets目录下，只是放在assets目录下代码写法有所不同 正确写法： <img :src="require('../assets/images/'+img+'.jpg')"/> 放在static目录 放在static目录下，
vue3 img标签动态加载图片
Ypromise-的博客
08-23 156
【代码】vue3 img标签动态加载图片。
vue src动态加载请求获取图片的方法
10-17
在Vue组件的模板中，使用`<img>`标签的`src`属性绑定到`formData.avatar`，确保图片可以被正确渲染： ```html <div class="avatar"> <img :src="formData.avatar" alt=""> </div> ``` 二、加载请求获取到的...
vue 使用＜img src＞加载图片的解决办法
蔡姐的博客
01-23 3654
最近使用<img src = “”>加载图片时候,遇到很多问题,现记录一下 一.assets和static的路径区别 assets:在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png), 　 static：在这个目录下,文件不会被webpack处理,他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，任何放在sta
基于vue 动态加载图片src的解决方法
08-28
下面小编就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中img src 动态加载本地json的图片路径写法
10-17
主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue :src 不生效，解决：给＜img＞图片标签绑定src属性，图片无法加载
weixin_44817017的博客
03-08 3720
问题： 使用:src绑定本地图片地址不生效 本地图片的位置 出现问题的代码： <img id="avatar" :src="imageLink"> data() { return { imageLink: '@/assets/img/avator.jpg' } } 页面上图片无法加载。 方法一：使用require引入图片 修改后的代码： <img id="avatar" :src="imageLink"> data() { return { im
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <template> <div> <span @click="showImage = !showImage">点击我</span> <img v-if="showImage" src="07111648929554.jpg" /> </div> </template> </div> </body> </html> <script> var vm = new Vue({ el:'#app' }) export default { data() { return { showImage: false } } } </script>找到不能显示的问题
06-03
3. Vue实例中的代码位置错误：Vue实例中的代码应该放在Vue.js文件之后，确保Vue.js已经被加载。 4. Vue实例代码错误：在Vue实例中，应该将组件定义在Vue实例的components属性中，而不是在export default中。 根据...
vue3中 实现 img 的绑定 从其他文件中引入图片 <p class="txt_centered_header" >政策信息管理 <img :src="icon_jump_white" /></p>代码展示
最新发布
09-21
在Vue 3中，`<img>`标签用于加载图片资源，`:src`是v-bind指令的一个简写形式，用于动态绑定属性。为了实现在其他文件中引入图片，你需要先将图片保存在项目的某个静态资源目录下，比如`static/images`。 假设你的...
vue3 中 img图片动态引入
qq_43901960的博客
06-13 395
vue3 中 img图片动态引入
vue3 require动态加载图片及动态加载svg图
weixin_49066399的博客
03-26 757
以下是本地图片及引用本地的svg图报错。2.解决本地引用svg图。1.解决本地图片引用。
vue3引入动态图片
蓝枫秋千的踩坑记录
08-30 672
文章目录背景原因解决方案1. 放到`public`目录下，使用绝对路径（`不适用动态情况`）2. 使用`import`导入（`适用于单个`）3. `new URL() + import.meta.url` （`支持多个，推荐`）官网 背景 img的src属性使用动态的时候，本地正常，部署到服务器上异常 <img :src="image" v-for="image in urls" /> 原因 如果资源在assets文件夹，打包后会把图片名加上hash值，直接通过:src="image"方式引入
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值