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

最新推荐文章于 2024-03-17 18:24:06 发布
最新推荐文章于 2024-03-17 18:24:06 发布
阅读量418 收藏
点赞数 1
文章标签： vue.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/marsnbsn/article/details/130709930
版权

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

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

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

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

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

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

最后最后！！！

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

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

 

 

Mars-Jin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在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（）]，}
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3本地src图片循环渲染不显示？
はんみん的博客
09-04 1593
有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。
vite中引入图片的几种方式
blue_121的博客
05-19 7756
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：（相对路径一定要写正确，当前引入图片的文件，相对图片的位置）生产环境，开发环境统统无效。目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。
Vue3照片本地渲染不显示 以及照片显示失败
最新发布
q77777_7的博客
03-17 556
图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入。明明img图片在同一路径下 且路径未发生错误为什么会照片打不开。在控制台点击图片切换按钮却可以切换。现在就可以正常显示了。
【webpack】和【vite】中获取本地文件夹目录下的所有图片
stay hungry, stay foolish
03-11 608
webpack 和 vite 中获取本地文件夹目录下的所有图片
vue3循环遍历图片渲染无效果
limif的博客
10-18 1932
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
vue3循环引入图片不显示问题 require无法使用问题
前端程序猿的博客
03-13 1430
【代码】vue3使用require。
在vue中v-for循环遍历图片不显示错误的解决方案
m0_70547044的博客
04-13 1151
看了看代码路径也是正确的，而且单个是能显示的，可for循环之后图片就显示不出来了。最后发现单个显示的跟for循环显示的图片路径不一样。
vite 循环使用图片
m0_61382303的博客
02-10 171
vite引入图片报错问题
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
热门推荐
LoveSummer
07-21 6万+
vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......
在vue中用v-for遍历img图片路径显示不出来的解决办法
qq_57423665的博客
05-09 860
在vue中，用v-for遍历图片路径，不报错但也不显示出来，解决方法如下
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vite+vue3+tinymce实现单图上传和多图上传到阿里云oss
deng_zhihao692817的专栏
05-31 1600
如何安装tinymce可以参考：在vuecli3.0+中使用tinymce及实现多图上传，文件上传，公式编辑等功能 - huihuihero - 博客园 我改的是 交互的部分，重点部分记录下来，便日后复查。 1、多图上传是依赖于多图上传的，所以单图上传很重要，我是上传到阿里云oss images_upload_handler: (blobInfo, success, failure) => { //console.log(
ant Design Vue2.0+vite+vue3+typescript+node后台项目实现使用upload一个表单上传多个图片
ycg5250的博客
06-14 639
项目介绍 项目是模仿王者荣耀mobile端的后台admin管理项目，前端使用ant Design Vue2.0+vite+vue3+typescript来做，后端是node。 需求 添加英雄技能界面截图。 一开始使用ant design vue的upload的change来做，后来发现我这个界面的upload是需要循环遍历出来的，而change函数里面只有三个参数，无法获取每个upload的特定参数，挣扎了好久看官方文档，终于发现了customRequest这个参数，官方说明是【通过覆盖默认的上传行为，可以
uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端）
我总是词不达意的博客
09-07 2996
uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端）
vue3+vite+Layout布局如何动态添加路由
05-17
在Vue3中，可以通过使用`createRouter`函数来创建路由实例，同时使用`createWebHashHistory`或`createWebHistory`函数来创建不同类型的路由模式。在动态添加路由的过程中，需要使用`router.addRoute`方法向路由器中添加新的路由配置项。 下面是一个示例代码，展示如何使用Vue3、Vite和Layout布局动态添加路由： ```javascript // 引入相关模块 import { createRouter, createWebHashHistory } from 'vue-router'; import Layout from '@/layout/index.vue'; // 创建路由实例 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Layout, children: [] } ] }); // 添加动态路由 const newRoutes = [ { path: '/dashboard', component: () => import('@/views/dashboard/index.vue'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard' } }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index.vue'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index.vue'), meta: { title: 'Tree', icon: 'tree' } } ] } ]; newRoutes.forEach(route => { router.addRoute(route); }); export default router; ``` 在上面的示例代码中，我们首先创建了一个包含一个空子路由的路由配置项。然后，我们定义了一个数组变量`newRoutes`，用于存放需要动态添加的路由配置项。最后，我们通过`forEach`循环遍历`newRoutes`数组，并通过`router.addRoute`方法将每个路由配置项添加到路由器中。 需要注意的是，`router.addRoute`方法只能在初始化路由时使用，无法在路由已经初始化之后使用。因此，我们需要在`createRouter`函数中初始化路由，并在路由创建完成之后再添加动态路由。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值