vue3+vite中多张图片遍历不显示问题！

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

#vue.js #前端 #前端框架

作者在尝试使用Vue3和Vite框架时遇到动态引入静态文件的挑战，Vue3不再支持require()。文中提到，单个文件可以使用相对路径解决，但多个文件在data中定义并遍历显示不出来。官方推荐的newURL()结合import.meta.url在开发环境有效，但在生产环境中出现问题。最后，作者采取了逐个import文件到数组的折衷方法，虽然不解为何直接放入URL无效。

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

第一次用vue3+vite的框架去写页面，因为vue3中去掉了require()动态引入的方式，特别不方便，

后面去vite官方文档找替代方法，

具体内容可自行查看：静态资源处理 | Vite 官方中文文档 (vitejs.dev)

其实单个静态文件可以使用相对路径去引用就ok，不要用绝对路径，开发环境正常，放到正式环境会有问题的。

然后就是多个静态文件，在data定义数组，然后遍历，是显示不出来的(我是这样，不晓得各位行不行！)，如上图，用了官方推荐的方法，new URL() + import.meta.url

在开发环境可以，但是在正式环境也不行，很奇怪。。。。。还是没能解决！

最后最后！！！

用了一种最蠢的方法，用import...from...的方式引入每张图片，去定义到数组里面

有人会问了，为什么不直接放到url里面呢？还多一步去引入
哈哈哈哈，因为我也不太理解，放到里面就是不行啊！有懂哥的可以告诉我！谢谢

 

 

Mars-Jin
关注
Vue3 + Vite 构建组件库发布到 npm
白雾茫茫丶
04-09 3189
这篇文章介绍了如何使用Vite构建组件库，并将其发布到npm上。文章包括搭建项目、调整目录结构、组件开发、整合并导出组件、编写package.json文件、vite打包配置、本地模拟、发布到npm、安装验证等步骤。文章还提供了一个基于Vue3+Element-plus封装的Table组件的示例，演示了如何运行和使用发布的组件。
【宁渡课堂】宁渡课堂vue3+vite+pinia+element-plus+apifox搭建的通用后台管理
edison4499的博客
07-15 2408
宁渡课堂【宁渡课堂】-vue3+vite+pinia+element-plus+apifox搭建的通用后台管理
在Vite中将数千个图标作为Vue组件进行访问-Vue.js开发
05-27
在Vite vite-plugin-icons中作为Vue组件访问成千上万个图标在由Iconify浏览器支持的Vite 90+图标集中，作为Vue组件访问成千上万个图标安装Install npm i -D vite-plugin-icons将其添加到vite.config。 js // vite.config.js从“ vite-plugin-icons”导入图标导出默认{插件：[Icons（）]，}
在vue中用v-for遍历img图片路径显示不出来的解决办法
qq_57423665的博客
05-09 1114
在vue中，用v-for遍历图片路径，不报错但也不显示出来，解决方法如下
解决vue3标签中引用动态图片失效问题
最新发布
joan_yb的博客
06-14 486
解决vue3标签中引用动态图片失效问题
vue遍历数组获取图片src显示不了的问题解决
小一_瑶的博客
06-03 5172
轮播图HTML： <swiper-slide v-for="item of swiperList" :key="item.id"> <img class="swiper-img" :src="item.imgUrl" /> </swiper-slide> vue中data部分使用require解决： swiperList: [{ id...
关于Vue3渲染本地图片不显示问题
weixin_61253190的博客
12-08 1359
发现代码中虽然是@/assets/img/xxx但是在浏览器解析完成后，却变成了/src/assets/img/xxxxxx。然后我们打开浏览器，检查，找到html结构元素发现路径是正常显示的，但就是出不来图片。但是我用v-for遍历这个数组进行循环显示数据时候就出现了问题。然后，在js文件里配置了静态数据，其中image代表了文件路径。尝试，复制html元素，粘贴到代码中，尝试把js中@数据全部替换换成/src。新建一个Vue3的工程文件，在。目录下放置了一些需要的静态图片。然后测试图片是否能成功显示！
Vue3+Vite项目中遍历图片url无法正常显示问题
tingmua的博客
04-07 729
一般来说都使用require来引入图片url就可以解决，但是require是webpack的方法，在Vite项目中使用就会报错。一般在vue项目中，使用v-for遍历图片的url，并使用v-bind循环绑定src，并不能正常显示图片。在Vite项目中，可以使用官方给出的new URL方法来引入图片路径。
vue3+ts+vite todoList小案例
04-09
在本项目中，我们探索的是一个基于Vue3、TypeScript和Vite构建的简单`todoList`应用。这个小案例展示了现代前端开发的一些关键技术和工具的整合，它们为高效开发提供了强大支持。以下是对每个核心组件的详细说明： ...
[Vue3 + TS + Vite] TipTap中遍历文档树所有节点，存储并设置所有标题
qq_45831414的博客
07-10 440
【代码】[Vue3 + TS + Vite] TipTap中遍历文档树所有节点，存储并设置所有标题。
vite+vue3使用模块化批量发布Mockjs接口
03-29
在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...
vue中循环图片不显示问题
侯阮悦的博客
07-07 2741
在Vue中通常使用v-for来遍历一个数组或者对象，但在去循环一个图片数组时出现了一些问题 结果却无法显示图片 经过百度之后得到了一个解决方法，通过require去动态获取图片路径 这样图片就可以完全显示了 为什么会出现这样的问题呢，是因为我们在动态的获取图片路径时，这个路径会被解析成一个字符串，这样就无法显示原来的图片里。而require是CommonJS中的关键字，用来加载模块可以解析路径。 根据参数的不同格式，require命令去不同路径寻找模块文件。 如果参数...
vue3+vite中显示img图片，显示不出来问题。
sinat_31773153的博客
03-16 2427
vue3+vite中显示img图片，显示不出来问题。
vue3本地src图片循环渲染不显示？
はんみん的博客
09-04 1915
有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
weixin_41513488的博客
09-03 1161
以上是一些常见的解决方法，根据具体情况可能需要进一步调试和排查。如果问题仍然存在，请提供更多详细的错误信息和代码片段以便更好地帮助您解决问题。
vue3项目本地src图片渲染不显示问题
weixin_58149434的博客
11-10 2224
解决vue3+vite项目中图片不显示问题
vue3 ＜img /＞的使用图片不显示
Anyuegogogo的博客
10-11 2330
vue3 的使用图片不显示
vue3动态引入图片不显示问题
qq_45555960的博客
08-16 1933
的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入。1.图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致.，这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径使用。方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite)方法1（适用于处理单个链接的资源文件）方法2（适用于处理多个链接的资源文件）方法3（适用于处理多个链接的资源文件）
VUE3 动态图片无法显示问题，:src=“img“
weixin_62839317的博客
03-12 414
img=new URL('@/assets/img/home/home.png', import.meta.url).href,
vue3+vite 设备地图展示
03-20
### 设备地图展示功能的实现 要在 Vue3 和 Vite 项目中集成设备地图展示功能，可以考虑使用一些流行的 JavaScript 地图库，例如 Leaflet 或 Mapbox GL JS。这些工具提供了丰富的 API 来支持地理数据可视化以及交互操作。 #### 推荐的地图插件 以下是两个常用的开源地图库及其特点： 1. **Leaflet** - 轻量级且易于上手的地圖庫。 - 支持多种瓦片服务（Tile Services），适合简单到复杂的地图需求。 - 提供详细的文档和活跃社区支持。 2. **Mapbox GL JS** - 功能强大，支持矢量瓦片和样式定制。 - 可通过自定义样式文件创建高度个性化的地图界面。 - 对于复杂的数据渲染和高性能要求的应用场景尤为适用。 #### 实现步骤概述 下面提供了一个基于 Leaflet 的示例代码片段，演示如何在 Vue3/Vite 环境下加载并显示基本地图，并标注设备位置点。 --- ### 示例代码：使用 Leaflet 展示设备地图 首先安装所需依赖项： ```bash pnpm add leaflet @types/leaflet ``` 接着，在组件中引入并初始化地图实例： ```javascript <template> <div id="map-container"></div> </template> <script setup lang="ts"> import * as L from &#39;leaflet&#39;; import &#39;leaflet/dist/leaflet.css&#39;; // 定义设备坐标数组 (纬度, 经度) const devicesPositions = [ [40.7128, -74.0060], // New York City [34.0522, -118.2437], // Los Angeles ]; onMounted(() => { const mapContainer = document.getElementById(&#39;map-container&#39;); if (!mapContainer) return; // 初始化地图对象 const map = L.map(mapContainer).setView([40.7128, -74.0060], 5); // 添加基础底图层 L.tileLayer(&#39;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&#39;, { maxZoom: 19, attribution: &#39;© OpenStreetMap contributors&#39;, }).addTo(map); // 循环绘制标记 devicesPositions.forEach((position) => { L.marker(position) .addTo(map) .bindPopup(`Device at ${position}`) .openPopup(); }); }); </script> <style scoped> #map-container { height: 500px; } </style> ``` 上述代码实现了以下功能： - 使用 `L.map` 方法创建地图容器[^1]。 - 设置初始视图中心点及缩放级别。 - 加载来自 OpenStreetMap 的免费瓦片服务作为背景地图[^3]。 - 遍历设备的位置列表，并为每个位置添加一个带有弹窗提示信息的标记。 --- ### 注意事项 当尝试扩展此功能时，请注意以下几点： - 如果需要更高级别的地图样式调整或性能优化，则可以选择迁移到 Mapbox GL JS 并订阅其专业版服务[^2]。 - 确保遵循所选地图服务商的相关条款与条件，特别是对于商业用途可能涉及的成本因素。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值