vue中v-for图片src路径错误
时间:2022-07-26
本文章向大家介绍vue中v-for图片src路径错误,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、问题概述
1. html结构如下:
<ul class="nav-list">
<li v-for="data in navlist" :key="data.index">
<div class="item">
<!--{{ data.src }}-->
<img :src="data.src" class="nav-img">
<p class="nav-title">{{ data.title }}</p>
<p class="nav-desc">{{ data.desc }}</p>
</div>
</li>
</ul>
2. navlist数据如下:
图片存在 ../../assets/images/index/ 文件夹下
navlist: [
{'title': '鱼塘', 'desc': 'world', 'src': '../../assets/images/index/navlist01.png'},
{'title': '鱼塘', 'desc': 'world', 'src': '../../assets/images/index/navlist01.png'},
{'title': '社群', 'desc': 'world', 'src': '../../assets/images/index/navlist02.png'},
{'title': '积分', 'desc': 'world', 'src': '../../assets/images/index/navlist03.png'},
{'title': '活动', 'desc': 'world', 'src': '../../assets/images/index/navlist04.png'},
{'title': '直播', 'desc': 'world', 'src': '../../assets/images/index/navlist05.png'},
{'title': '资源', 'desc': 'world', 'src': '../../assets/images/index/navlist06.png'},
{'title': '鱼友', 'desc': 'world', 'src': '../../assets/images/index/navlist07.png'},
{'title': '鱼圈', 'desc': 'world', 'src': '../../assets/images/index/navlist08.png'},
{'title': '会员', 'desc': 'world', 'src': '../../assets/images/index/navlist09.png'}
]
3. 页面效果如下
图片无法显示
4. 浏览器中html解析如下
路径正确,但图片不显示
5. assets与static文件夹的区别
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖
static:在这个目录下文件不会被被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename] 根据webpack的特性,总的来说就是static放不会变动的文件,asserts放可能会变动的文件
二、解决方案
1. 用require()处理src路径
{'title': '鱼塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')}
data () {
return {
navlist: [
{'title': '鱼塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')},
{'title': '鱼塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')},
{'title': '社群', 'desc': 'world', 'src': require('../../assets/images/index/navlist02.png')},
{'title': '积分', 'desc': 'world', 'src': require('../../assets/images/index/navlist03.png')},
{'title': '活动', 'desc': 'world', 'src': require('../../assets/images/index/navlist04.png')},
{'title': '直播', 'desc': 'world', 'src': require('../../assets/images/index/navlist05.png')},
{'title': '资源', 'desc': 'world', 'src': require('../../assets/images/index/navlist06.png')},
{'title': '鱼友', 'desc': 'world', 'src': require('../../assets/images/index/navlist07.png')},
{'title': '鱼圈', 'desc': 'world', 'src': require('../../assets/images/index/navlist08.png')},
{'title': '会员', 'desc': 'world', 'src': require('../../assets/images/index/navlist09.png')}
]
}
}
2. html结构不变
<ul class="nav-list">
<li v-for="data in navlist" :key="data.index">
<div class="item">
<!--{{ data.src }}-->
<img :src="data.src" class="nav-img">
<p class="nav-title">{{ data.title }}</p>
<p class="nav-desc">{{ data.desc }}</p>
</div>
</li>
</ul>
3. 页面效果如下
正常显示
4. 浏览器中html解析如下
webpack打包之后src路径
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下Python脚本自启动与定时任务详解
- Linux服务器tomact 8.0启动慢的完美解决方法
- vim学习高级技巧之序列的生成方法详解
- 【LoRa社区网关点亮活动】基于腾讯云IoT Explorer搭建开放的LoRaWAN网络
- 面试官:说一下List排序方法
- GWAS全基因组关联分析流程(BWA+samtools+gatk+Plink+Admixture+Tassel)
- linux中ipset命令的使用方法详解
- VirtualBox 未指定要bridged的网络界面的解决办法
- Vim中宏命令的使用实例详解
- 在CentOS搭建Git服务器的详细步骤
- CentOS使用EPEL源的方法步骤
- VirtualBox 错误:This kernel requires the following features not present on the CPU
- keepalived实现nginx高可用
- LINUX中详解AWK内建变量FS,NF,NR,RT,RS,ORS,OFS
- Centos7安装配置NFS服务和挂载教程(推荐)