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

已于 2022-04-07 18:57:46 修改
阅读量656 收藏 1
点赞数
分类专栏： VUE 文章标签： vue js
于 2020-11-22 11:18:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwhy123/article/details/109922912
版权
本文介绍了在Vue2项目中，使用v-for遍历本地图片时遇到无法显示的问题及三种解决方案：1. 在图片路径前添加'/'；2. 确保图片文件夹路径正确；3. 通过import引入图片。
摘要由CSDN通过智能技术生成 
<div>
	<ul>
		<li v-for="item in items">
			<img :src=&
最低0.47元/天 解锁文章
「已注销」
关注
专栏目录
webpack 图片处理和优化
ivenqin的博客
05-16 767
本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。 而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。 如何在webpack中打包图片 在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别： f
解决在vue中v-for循环遍历图片不显示错误
Janner668的博客
03-12 463
<template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i) of imgs" :key="i" class="carousel-item" :style="{width:innerWidth} + 'px' "> <img :src="img.src" :style=
webpack 图片的处理
baidu_37183015的博客
04-11 326
webpack 图片的处理
Vue2和Vue3中解决本地图片在img标签动态赋值不显示问题
最新发布
miaomiaowins的博客
07-22 1060
对于Vue2和Vue3在img标签中动态赋值导致图片无法显示，或项目build打包后路径错误，导致图片无法显示问题！
webpack-图片处理
weixin_45736311的博客
06-30 208
1.保存两张图片test.jpq和timg.jpg，右击，点击属性，查看图片大小 2.将这两张图片复制粘贴到项目的img文件中 3.将其中一张作为背景图 4.现在来试一下当前文件中能否应用这张图片 npm run build指令，回车，会发现报错（因为当前没有合适的loader去处理这个文件） 5 使用loader处理该文件（配置） （1） （2）复制此行代码 （3）粘贴到指令运行区，回车，等待安装 （4）复制选中的代码，粘贴到webpack.config.js文件中 这条语句的意思是：这.
webpack-图片文件处理
小小前端攻城狮的博客
04-01 772
资源准备阶段 示例 1.安装依赖 npm install --save-dev url-loader npm install --save-dev file-loader 2.配置webpack.config.js //导入path模块 const path = require('path'); module.exports = { entry: './src/main.js', output: { //path是通过node模块的path.resolve函数拿到，第一个参数是内置
WebPack 图片处理
雨巷的博客
10-22 1134
WebPack 图片处理 前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。 PNG / JPG 等像素图片格式 使用 webpack 将切完的 PNG/JPG 等像素图片压缩后（tin
解决vue的 v-for 循环中图片加载路径问题
10-18
本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，我们需要理解问题的背景。在一个实际项目中，产品需求要求图片与名称一一对应，但由于没有专门的图片服务器，图片被存储在前端。在这种情况下...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
在使用Vue框架开发前端应用时，经常会遇到需要动态加载图片资源的情况，特别是利用v-for指令循环渲染列表元素时。正确地使用v-for循环和动态绑定图片源地址(src)对于提高开发效率和页面性能至关重要。 首先，我们...
vue中v-for加载本地静态图片方法
08-27
Vue 中使用 v-for 加载本地静态图片方法 在 Vue 项目中，加载本地静态图片是一件很常见的事情，但是如果你使用 v-for 指令来加载图片，可能会遇到一些问题。本文将分享一种使用 v-for 加载本地静态图片的方法，并...
webpack10——处理图片
qq_36836277的博客
06-03 192
如何使用在webpack使用图片，以及如何打包我们的图片 图片引入方式 1）在js中创建图片来引入 2）在css引入图片background(‘url’) 3) 1.在js中创建图片来引入 （1）在index.js中写入以下代码 import logo from ‘./gogo.jpg’ let image = new Image(); image.src = logo //这里写图片的路径 do...
webpack处理图片资源（jpeg,jpg,png等）
jieyucx的博客
06-07 1767
到这里可能有的小伙伴就要问了，为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？这时可以看到dist目录下只有一张图片了，另一张被处理成了base64,以 data URI 形式内置到 js 中了。到 Webpack 里了，我们只需要简单配置即可处理图片资源。,我们添加配置之后，应该会将其转换成base64.可以看到效果还是和上次没处理base64之前一样的。在webpack5以前，我们处理图片资源通过。将小于10k的图片资源，处理成base64格式。
傻瓜式学习webpack（四）——图片处理
Selina_Chan的博客
11-06 948
有了前面三章的基础，利用webpack处理图片也是同理的。 一、首先你需要安装 file-loader和url-loader； 二、在你的webpack.config.js中的代码添加处理图片相关的loader，添加后如下： module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index:
webpack处理图片文件
longtengg1的博客
07-13 244
webpack处理图片文件，在webpack.dev.js和webpack.prod.js中分开写的 1、在webpack.dev.js中 直接引入图片 url rules: [ { test: /\.(png|jpg|jpeg|gif)$/, use: 'file-loader' } ] 2、在webpack.prod.js中 直接引入图片 url对于线上是不友好的， 在
webpack 图片文件处理：url-loader和file-loader
qq_46112274的博客
02-15 1147
1、webpack 图片文件处理 1.1、图片文件处理方式一：url-loader 1.2、图片文件处理方式2：file-loader 1.3、图片文件处理-修改文件名称 2、安装loader 安装图片文件处理loader的参考文档 npm install --save-dev url-loader@1.1.2 3、配置 { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options:
webpack（6）webpack处理图片
weixin_43880991的博客
07-11 226
图片处理url-loader(webpack5之前的处理方式) 在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片 body{ background: url("../img/test1.png"); } 但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 ...
(掌握)webpack对图片资源的基本处理
小余的前端博客
04-25 363
好处举例：这样自己制定规则就可以防止，打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴，完全对不上了。哈希值最好保存下来，哈希值是唯一的，防止图片不小心重复，[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）[ext]： 处理文件的扩展名(后缀名，比如.svg，.js，.html之类的)之前通过使用 url-loader，并且配置资源体积限制实现。[name]：处理文件的名称(原来图片的名字)
webpack.config.js====图片处理
weixin_33836223的博客
01-25 174
1. 安装依赖： cnpm install --save-dev url-loader image-webpack-loader html-loader 2. webpack.config.js规则的配置 /* * url-loader：主要是图片处理和Base64编码（base64就是一串加密的字符串，而且base64编码过的图片是没有http请求的...
webpack快速入门-处理图片资源
温情
09-04 233
过去在Webpack4时，处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，只需要简单配置即可处理图片资源。
vue使用v-for图片不显示
07-14
如果在Vue中使用v-for来循环显示图片，但图片不显示，可能有以下几个原因： 1. 图片路径错误：请确保图片的路径是正确的，可以使用绝对路径或相对路径。如果图片位于public目录下，可以使用绝对路径，如`/img/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值