在vue-cli中使用v-for动态设置img的src值，路径对，但是不显示图片

最新推荐文章于 2024-01-18 22:15:03 发布

转载最新推荐文章于 2024-01-18 22:15:03 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wr20190131/p/10416856.html

文章标签：

#javascript #ViewUI

本文探讨了在Vue.js项目中动态获取img标签src属性值的方法。作者分享了在使用vue-cli搭建的项目中，尝试从src/assets/images目录下加载图片，但未能成功显示的问题。最终，通过将图片放置于/static/images目录并使用v-bind绑定动态路径的方式解决了问题。

在vue-cli中动态的获取img的src值，正确的形式为<img :src="item.img"> ，要使用v-blind绑定

开始，我把需要的图片放在了/src/assets/images中，在浏览器中利用F12发现路径也对，但是不显示图片

解决：

后发现，直接利用<img src="../assets/imgages/1.1.jpg">可以显示图片，但是利用浏览器的F12发现，路径显示的是/static/images/1.1.jpg，于是，我将图片放在了/static/images中，使用v-for动态绑定，则显示图片。

转载于:https://www.cnblogs.com/wr20190131/p/10416856.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30409849

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浅谈在vue-cli3项目中解决动态引入图片img404的问题

10-15

然而，动态图片路径问题的出现，主要是因为Webpack会将这些图片作为模块进行处理，尤其是在Vue-cli3中，内置的webpack配置会将图片视为一个模块进行打包。这就意味着，如果动态生成的图片路径被Webpack处理，而图片...

解决vue的 v-for 循环中图片加载路径问题

10-18

例如，如果图片存储在`src/img`目录下，但Vue CLI打包后，图片路径会改变，需要使用相对路径或者绝对路径来确保在生产环境中也能找到图片。 2. **懒加载**：在大量图片加载时，考虑使用懒加载策略，以提高页面加载...

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

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

10-18

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

vue v-for循环 img路径正确缺不显示的问题

qq_41183241的博客

09-18

606

循环图片的写法我数组首先是写成这样发现并不能正确显示图片之后百度了好久才知道，webpack把路径看作了字符串，所以没有代入进去正确写法：我把图片放进static文件夹后才能正确循环。如果不循环直接写死的话，第一个图的路径是没问题的 ...

vue动态赋值img的src，用require()

热门推荐

qq_37161741的博客

05-14

1万+

首先，单独一个src是可以的 <img src="../../assets/logo.png" alt="图片" /> 数组是这样的想改为动态赋值的形式就实现不了 <img :src="item.img" alt="图片" /> 所以改为如下：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，将图片作为模块加载进去,用require()就可以了 ...

v-for动态设置img的src

qq_30136729的博客

09-26

2253

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

v-for动态渲染img时src属性的处理

默默的小跟班的博客

01-12

1450

一、问题现象项目中需要渲染一个包含图片的列表。采用v-for循环渲染，代码简写如下： <li v-for="{ pic } in picList"> <img :src="pic" > </li> picList = [{ pic: '@/assets/images/mysql.png' }] 采用了各种字符串拼接方案都不行。 :src = "'@/assets/images/'+'mysql.png'" :src = "'..

vue-cli3中配置alias和打包加hash值操作

10-14

在 Vue CLI 3 的示例中，对于图片、音频、视频和字体文件的配置，我们使用了 `hash` 来确保当这些静态资源改变时，它们的 URL 也会随之更新： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: '...

详解在vue-cli中使用路由

08-29

在Vue.js开发中，Vue CLI（命令行工具）是一个非常重要的辅助工具，它提供了一种快速搭建项目结构的方式。在创建Vue项目时，Vue CLI通常会自动安装所需的依赖，其中包括Vue Router，这是一个官方推荐的路由管理器，...

彻底搞懂并解决vue-cli4中图片显示的问题实现

10-14

在使用vue-cli4开发Vue.js项目时，图片显示问题是一个常见但容易忽视的细节问题，主要涉及路径的正确设置和webpack的处理机制。以下是关于解决vue-cli4中图片显示问题的详细知识点介绍。 ### 图片路径问题在vue-...

Vue img src 动态切换的一个解决方案

free2o的专栏

11-06

6056

Vue img src 动态切换的一个解决方案在Vue 中，如果img 的src 为动态切换的话，会出现图片无法加载的情况。网上已经有了很多讨论，在解决这个问题，基本上都是大同小异。这里记录一下自己的解决方案，可能会和某些方案雷同。背景采用vue cli 3 创建的项目目录结构和 vue cli 2 会有不同。本文的式样环境为 vue cli 3 中。创建一个组件 item.vu...

vue-cli引用图片资源的三种方式（template、script、style）

shawxlee的优快云博客

02-23

505

`src/assets`下新建文件夹`images`，用于存放所有图片资源

动态赋值 image 的 src

qq_31151699的博客

12-29

3347

vue、node、webpack

vue v-for 循环时 src=“{{item}}“ 不能访问图片地址的问题

hj123456852的博客

11-27

1619

<li v-for="item in imageSrc> <img src="{{item}}" </li>访问不了图片地址 data(){ return { imageSrc:[ "@/assets/small/01.jpg" ] } } 解决方案：第一：步将字符串地址放在require（）中 data(){ return { imageSr...

Vue中图片问题合集

aduocd的博客

11-22

570

目录 1.背景 2.版本 3.问题集 1）Vue中使用图片不显示 2）Vue上传文件第一次触发，第二次不触发 3）使用Swiper时，图片动态返回 4）轮播图的循环播放失效 1.背景在使用Vue+ElementUI进行前端工程开发中，遇到一些图片的问题，包括上传、回显等。这里做一些记录，方便以后查看 2.版本 npm 6.14.12 vue-admin-template 4.4.0 axios 0.18.1 element-ui 2.13.2

Vue | 动态绑定img的src属性