vue3中的img标签使用动态链接无法显示

最新推荐文章于 2025-06-26 10:18:47 发布
原创 最新推荐文章于 2025-06-26 10:18:47 发布 · 528 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue

例: 此时我再代码中使用了 动态的img

下面是处理的数据

此时浏览器会把这个路径当成是网络资源去进行加载 会无法显示

解决办法 

1.  网上大部分推荐去使用require包裹住  但是require 是 Node.js 中的一个模块加载函数，在浏览器中并不是默认支持的 因此使用会报错误

2. 使用 new URL() 语法去解决静态资源路径加载   他比较实用于加载动态的image路径

处理动态路径方法

模板使用 

VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
Vue3 + Vite 动态引入图片
qq_43806604的博客
11-01 9027
Vue3 + Vite 动态引入图片 开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错 require is not defind 查看vite官方网站 官方说明 import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可
解决vue项目里面，img标签加载不出网络图片
qq_53245353的博客
06-26 387
Referer是http请求header的一部分，当浏览器向Web服务器发送请求的时候，请求头信息一般包含referer。该属性的作用就是告诉服务器这个链接是从哪个页面链接过来的，服务器就可以基于此信息进行处理。
关于vue3中动态使用img标签（本地资源）记录
Anlittlecat的博客
07-04 1690
关于img标签中对本地图片动态赋值被识别为网络资源，找不到图片相关内容的记录与解决。
Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题
weixin_53339757的博客
11-23 922
Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题
vue中img的src动态渲染不显示
Julia_0502的博客
06-07 1972
vue中img的src动态渲染不显示 问题描述 根据不同状态显示不同的状态图标，原代码（不显示）如下： <img :src="`@/assets/device/${itemdata.deviceStateName}.png`" :alt="itemdata.modelName" > 实际上在引用的路径下这些图片是存在的，只是引用的方式不对，图片并没有被打包，显示引入路径，所以导致找不到该图片 解决办法 使用require引入图片
Vue2和Vue3中解决本地图片在img标签动态赋值不显示问题
miaomiaowins的博客
07-22 2975
对于Vue2和Vue3在img标签中动态赋值导致图片无法显示，或项目build打包后路径错误，导致图片无法显示问题！
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
综上所述，解决Vue动态加载图片在跨域环境下无法显示的问题，需要针对具体情况选择合适的解决方案。如果是开发环境中遇到的问题，配置vue.config.js中的代理转发是一种方便快捷的方法。如果是生产环境，应该采取更为...
Vue组件中动态设置图片src路径实例
最新发布
07-02
总之，无论是Vue2.x还是Vue3.x，动态设置img标签src属性都是通过将图片路径设置为组件响应式数据实现的。Vue2.x用require函数，Vue3.x用ES6的import语法。这种做法保持了数据响应性，使组件结构更清晰模块化，对开发...
vue-quill-editor 自定义 img 标签，给标签添加 href 属性
且听风吟的博客
09-13 3798
vue-quill-editor 富文本编辑器自定义 img 标签属性
解决vuecli3中img src 的引入问题
12-28
最近公司要做一个在线ps 的项目 但是后台没写完, 我在用本地图片上传预览的时候 发现图片不能显示, 解决的办法 是 //页面的结构 <div class=workspace> <img src=&#39;img&#39;> </div> export default { data() { return { img:require(&#39;../../assets/fapiao.jpeg&#39;), //这里只能使用require的方式去使用 如果img 是数组, 就用 //[require(&#39;../../assets/fapiao1.jpeg&#39;), //require(&#39;../.
详解在vue-cli中使用路由
08-29
3. **在模板中使用路由** 在`src/app.vue`文件中，可以使用`<router-link>`标签创建可点击的链接，它们会根据`to`属性指定的路径进行跳转。同时，使用`<router-view>`标签作为占位符，Vue Router会在这里渲染匹配到...
在Vue中使用v-for循环生成img标签时，如何动态绑定src属性以加载不同的图片资源？
11-10
在Vue中利用v-for循环动态生成img标签并绑定src属性时，需要注意的是，Vue不支持直接使用传统的相对路径。这是因为在编译阶段，Vue需要将资源路径解析为有效的模块引用。因此，我们需要使用ES6的require函数来动态...
Vue3图片（Image）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-17 1万+
图片展示或预览组件；支持：预览单张或多种图片；水平镜像或垂直镜像顺时针旋转或逆时针旋转；还原图片；放大缩小；下载图片；鼠标任意拖动；鼠标双击图片还原；触摸板或鼠标滚轮控制图片缩放；点击左右切换按钮预览多张图片；使用键盘上下左右按键进行图片切换；禁用预览；自定义样式；自定义预览图片样式；自定义排列方式和加载中样式；无边框；相册模式；自定义预览配置；自定义主题色等；总之，功能丰富，简单易用，总能满足你的想象😁
解决Vue项目中img的:src动态加载图片不成功
小太阳的博客
04-08 6272
需求如下： 需要动态加载图片，在写代码的时候发现，img标签直接动态绑定图片的相对路径的时候，图片不能显示，如下图效果 控制台查看元素的时候，发现也已经渲染，但是页面就是不显示 代码如下： <div class="legend-content"> <div v-for="(item, index) in legendData" :key="index" class="legend-item"
解决vue3绑定动态本地图片时require无法使用问题
qq_45840993的博客
03-07 3409
解决vue3绑定动态本地图片时require无法使用问题，vue2，vue3中使用img标签绑定动态路径
动态绑定属性
qq_33879627的博客
09-21 3390
（四）动态绑定属性 4.1 v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr
vue3: img标签src属性动态设置资源路径
XL_0502的博客
08-16 7458
vite中默认支持ESM方式加载模块，没有require相关方法。补充两个方法。方法 require()Node.JS 原生方法 ，以CommonJS方式加载模块/文件/图片；Webpack 默认支持 ，Vite不支持；方法 require.context()Webpack 特定方法，此方法可实现自定义上下文；Vite不支持；
vue实现img标签调用方法动态获取路径
02-17
### Vue 动态设置 `img` 标签图片路径的方法 在 Vue.js 应用程序中，当尝试动态绑定图像源 (`src`) 属性时，如果仅提供相对或模块解析路径，则可能会遇到图像无法加载的情况。这是因为 Webpack 需要显式的导入指令来处理静态资源。 #### 使用 `require()` 函数引入图片 对于模板中的数据绑定表达式，可以采用如下方式： ```html <div> <img :src="getImagePath(item)" /> </div> ``` 对应的 JavaScript 或 TypeScript 方法定义为： ```javascript methods: { getImagePath(item) { return require(`@/assets/images/${item.imageName}`); // 假设 images 文件夹位于 src/assets 下面 } } ``` 这种方法确保了即使是在构建过程中也能正确解析并打包所需的图片文件[^1]。 #### 数据属性内直接调用 `require()` 另一种常见做法是直接在组件的数据选项里使用 `require()` 来预加载图片： ```javascript data() { return { items: [ { id: 1, imageName: &#39;example.jpg&#39;, imagePath: require(&#39;@/assets/images/example.jpg&#39;) }, // 更多项目... ] }; }, template: ` <ul> <li v-for="item in items" :key="item.id"> <img :src="item.imagePath"/> </li> </ul>` ``` 这种方式适用于那些不需要频繁更改的图片链接，并且可以在渲染前就准备好所有的依赖关系[^2]。 #### 处理绝对路径的问题 需要注意的是，在某些情况下（比如开发服务器配置不同），可能需要调整Webpack 的 alias 设置以便更好地支持绝对路径引用。通常建议将公共资源放置于 `/public` 目录下而不是 `static`，因为后者已经被弃用了；而前者可以直接通过根 URL 访问而不必经过编译过程[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值