关于在vue里面用v-for 展示image图片不显示的问题

最新推荐文章于 2024-07-19 20:16:56 发布

cv工程师_java

最新推荐文章于 2024-07-19 20:16:56 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44354992/article/details/121990237

版权

本文介绍了在Vue项目中遇到image图片无法显示的问题，提出了两种解决方法：将图片放入static目录，或者使用require引入图片路径。这两种方案可以帮助开发者解决前端图片展示的常见问题。

摘要由CSDN通过智能技术生成

问题：image不显示照片

    <ul>
                        <li v-for="(item,index) in pics">
                        {
   {
   item}}<image src="./bar_img/1.jpg"></image>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cv工程师_java

关注关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VUE3语法--img图片不显示/img的src动态赋值图片显示

雾林小妖的博客

11-27

1万+

在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。

vue v-for 循环图片三种方法

半盏茶. ོ

11-25

9760

一、正常的引入，但是得在static下创建image文件夹 <view v-for="item in list"> <text>{{item.name}}</text> <view class=""></view> text>{{item.age}}</text> <view class=""></view> <image :src="item.img" mode=""></

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

vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）

qq_37899622的博客

08-12

2014

vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）

vue图片显示不全

热门推荐

qq_40137978的博客

05-26

1万+

Vue 中 v-for 图片不显示的解决办法 (亲测可用) 一般我们循环图片习惯用以下代码： <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in items" :key="item">  <img v-bind:src="item.url"&

Vue 中使用 v-for 展示不同的图片

cdd9527的博客

01-13

1365

Vue 中展示在 v-for 展示不同的图片

解决v-for img src 渲染不出来以及动态拼接不显示的问题

张木期的博客

08-25

965

问题描述：定义了一个数组，数组里面装的有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。解决办法：数组里面图片的路径要写成如下：解决办法：数组里面图片的路径要写成如下： image:require('../assets/img/login.png') 渲染的时候要写 <img :src="item.image" /> 具体事例 <a-menu v-for="(v, i) in navData" :key="i" :d

vue中 v-for 遍历图片路径，不报错，但是图片不显示的问题

Stitch_xiao的博客

01-07

2118

在做项目的时候遍历图片遇到的问题： html： <div class="data-img" :style="item.bgc" > <img class="img" :src="item.url" alt=""> </div> js: dataArr: [ { title: "收入", data: "¥13820.00", bgc: "background:#FF

VUE2 v-for 图片不显示解决方法

FUTURE的博客

11-22

640

VUE CLI4.x v-for 图片不显示解决方法 <div> <ul> <li v-for="item in items"> <img :src="item.src"> {{item.id}} </li> </ul> </div> <script> export default{ data(){ return{ items:[{ src:'../im

关于vue v-for循环解决img标签的src动态绑定问题

10-18

今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue+vant使用图片预览功能ImagePreview的问题解决

10-15

在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...

vue使用v-for遍历本地图片不显示

improvement

12-09

4766

vue使用v-for遍历本地图片不显示问题 1、项目中本地有一组图片需要循环遍历展示，在使用v-for遍历之后发现无法展示图片，解决方法如下。 2、首先，正常的图片路径如下，但是想要展示不能按正常的来。需要遍历的数据正常情况如下。 // 重点代办任务数据 toDoListDate: [ { id: 1, name: '即将响应超时', number: 20, imgSrc: '../common/img/group1.webp' }, { id: 2, na

vue项目中使用vue-directive-image-previewer插件进行图片放大处理

luoteen的博客

12-27

4297

安装vue-directive-image-previewer插件 npm install vue-directive-image-previewer --save 在vue项目中的main.js中引入并注册 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directi...

解决：vue项目中，Image组件中的图片加载不出来

weixin_56554735的博客

04-11

1736

1. 将数据库里存放的是图片的网址链接，另外保存，并命名为xxx.jpg形式，并将图片都存放在了前端代码的asstes文件夹中，原因：应该是图片还没有加载出来，页面就已经渲染了，所以图片显示“加载失败”报错：GET xxxxx.jpg 403。文章主要是为了记录自己写代码中的报错。

v-for动态设置img的src

qq_30136729的博客

09-26

2053

项目开发中遇到这个问题，记录总结一下。问题：利用v-for动态设置图片,图片路径处写法如下图，发现图片不显示 <div v-for="(item,index) in classify" :key="index" class="cart"> <img :src="item.img" alt=""> <div> <p>{{item.title}}</p> <p&

Vue v-for循环解决img标签的src动态绑定问题?

写写平时的技术与感想

08-25

1万+

return { product:[ { "src":'../../static/slider/logo1.jpg', "deceration":"产品1", "price":100, "id":1 }, { "src":"../../static/slider/logo.png", "deceration...

Vue切换图片用v-for数组优化

kn1ght7z的博客

03-20

789

和上次在html的排面上有所差异，主要是在标签里设置一个 v-for="image in arrayimg"然后里只嵌套一个img元素,如图： html优化了很多行，和上次同样的绑定class v-bind指令还有点击事件，有所不同的是，这次都只用设置一个。class用绑定对象的方式，数组对象image.active边框,v-bind指令绑定图像image.url，点击事件带有一个参数image后面会使用到。在data存入数组的数据格式是这样的前面存放图片数据，图片后面存放active边框。最后

vue使用v-for循环本地图片时图片不显示

03-30

可能是图片路径不正确或不完整导致的。请确保图片路径是正确的，并且是相对于项目根目录的。另外，您还可以尝试使用require语法来加载图片，例如： ```html <img v-for="img in images" :src="require(`@/...