vue3循环遍历图片渲染无效果

最新推荐文章于 2024-09-06 13:55:54 发布

摩羯柚子

最新推荐文章于 2024-09-06 13:55:54 发布

阅读量2.1k

点赞数 6

分类专栏： vue css 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/limif/article/details/127384265

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

图片路径以及当前组件：

需要遍历的图片数据：

循环遍历展示图片：（注释部分也是可以渲染出来）

注意：

绑定的图片路径必须写成src开头，也就是根目录,

路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果

<!-- <span class="img"><img :src="`src/assets/situation/${item.img}.png`" alt=""></span> -->
<span class="img"><img :src="'src/assets/situation/'+item.img+'.png'" alt=""></span>

效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

摩羯柚子

关注关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue中使用for循环生成img但是src 无效的问题解决 require

preserveXing的博客

12-01

1364

1. 使用情况一:直接把src的值写在img中代码样式 <ul> <li > <img :src="./src/img/1.jpg" alt=""> //按照你图片存放的路径 </li> </ul> 这样写完全没有问题他会找到图片并进行显示 2. 使用情况二:把vue中data的src的值写在img中 <ul> <li v-for="(item,index) in n

Vue中循环遍历与key值原理详解

m0_71345904的博客

08-02

2391

1. 虚拟DOM中key的作用：（面试题） key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

参与评论您还未登录，请先登录后发表或查看评论

vue3本地src图片循环渲染不显示？

はんみん的博客

09-04

1822

有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。

Element Plus（Vue 3 版本）来实现图片轮播

最新发布

weixin_73060959的博客

09-06

833

使用 Element Plus（Element UI 的 Vue 3 版本）来实现图片轮播，你可以利用 Element Plus 提供的组件。这个组件提供了一个方便的接口来展示轮播图，包括切换箭头、指示器（小圆点）等。以下是一个基本的示例，展示如何使用 Element Plus 的。

vue3循环展示本地图片

x_1999的博客

12-21

893

【代码】vue3循环展示本地图片。

vue3中如何循环本地图片

qq_43405603的博客

08-30

1596

vue3中如何循环本地图片

vue3本地图片 for循环加载的方法

xzkx325的博客

06-11

699

使用路径拼接名称后的字符串当作键名然后加载图片。第四步直接页面中v-for循环即可。关键是图片是异步加载的。

vue改变循环遍历后的数据实例

10-16

首先，文章标题“vue改变循环遍历后的数据实例”直接点明了内容的中心，即在Vue项目中如何处理循环遍历得到的数据，并且在数据改变后更新视图。这是一个实际开发中非常常见的需求，比如在表格数据展示、列表渲染等...

vue2.0 循环遍历加载不同图片的方法

08-27

在Vue 2.0中，实现循环遍历加载不同图片主要依赖于模板语法和数据绑定。下面我们将深入探讨这一主题，了解如何在Vue组件中动态地显示一组不同的图片。首先，我们要了解`v-for`指令。`v-for`是Vue中的一个核心指令...

浅析vue中常见循环遍历指令的使用 v-for

10-18

在Vue.js中，v-for是用于遍历数组或对象并渲染一个列表的指令。这是Vue.js的核心功能之一，使得开发者可以轻松地重复使用模板元素，来展示集合数据。首先，v-for的基本用法是与指令v-bind结合使用。它的语法类似于...

vue 解决遍历对象显示的顺序不对问题

10-16

在Vue.js开发过程中，我们经常会遇到遍历对象并将其内容展示在页面上的需求。然而，JavaScript的对象属性并没有天然的顺序，这可能导致在遍历时显示的顺序与预期不符。本篇文章将详细介绍如何解决Vue中遍历对象显示...

vue循环渲染本地路径图片不显示问题

欢迎欢迎

01-07

786

写代踩到过的坑，分享一下上代码 <template> <div class="swipe"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item, index) in src" :key="index"> <img :src="item" alt=""&gt

vue3+vite项目，打包后，图片失效的问题

insist_life的博客

08-02

8514

第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！

vue3 动态渲染本地图片（跳坑）有问题

weixin_45932157的博客

07-29

1003

vue图片路径渲染问题

vue中，本地图片路径写到js中，为何渲染不出来？

uperficialyu的博客

01-14

6700

首先看一个项目目录结构：代码如下： html： <img src="../../assets/logo.png" alt=""> 编译效果：是不是图片显示出来了，但是如果我的图片路径是写到data里面的，在img上面，绑定一个data的数据，那么是不是图片加载不出来？但是图片的路径还是有的？如下效果：代码如下： html： <img :...

vue里面的img，其中src的地址不变，则不渲染

qq_36606438的博客

05-24

255

【代码】vue里面的img，其中src的地址不变，则不渲染。

vue v-for 中 img图片渲染不出来的解决方法

jjw_zyfx的博客

09-24

3429

vue v-for 中 img图片渲染不出来的解决方法

vue循环渲染不同图片

m0_59994757的博客

01-20

3359

关于 Vue 中循环生成图片方法先上基础在 Vue 中 img 图片的 src 的路径有两种索引方法：可以直接 <img src="路径" alt="一张图片"> 在 data 中 imgSrc: require(‘图片路径’) 然后 <img :src="imgSrc" alt="一张图片"> 提出问题那么如果想循环生成不同图片该怎么办？思考一会儿。。。思考半天后解决问题可以通过生成对象的方式解决问题如下：在循环组件中定义如下结构 im

vue中使用v-for循环动态加载图片(:src)失败的解决方法

ThisEqualThis的博客

11-24

7289

在vue中使用v-for循环动态加载图片，如果img的src为url链接地址时，图片可以显示出来；但是一旦换成本地静态图片资源，加载就出现了问题，图片碎裂，无法加载。使用url链接时，图片正常动态加载： <template> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-f...

vue foreach循环遍历数组对象

09-13

在Vue中，可以使用v-for指令来进行循环遍历数组对象。v-for指令可以用于在模板中将数组的每个元素渲染为一个DOM元素。下面是使用v-for进行循环遍历的示例代码： (item, index) in items" :key="index">{{ ...