vue中v-for图片src路径错误
一、问题概述
<img :src="data.src" class="nav-img">
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解析如下
vue中v-for图片src路径错误相关推荐
- uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误
效果图 完整代码 <template><view><image :src="popupImgSrc1" mode="aspectFit&qu ...
- vue中使用 svg图片
vue中使用 svg图片 1.assets 中新建 icons 文件夹:icons文件夹下 svg 是svg图片,index.js,svgo.yml 文件如下: a. index.js import ...
- static图片编译了 vue_详解vue-cil和webpack中本地静态图片的路径问题解决方案
本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不 ...
- 微信小程序 - ＜image＞图片 src 路径动态拼接多个变量
前言 在微信小程序中对于动态图像 src 路径,您无法像正常 Vue 项目那样拼接变量路径,这归结于小程序框架底层. 在正常 Vue 中,一个默认字符串和一个变量,很容易实现. 但在微信小程序中,您会 ...
- 在vue中设置背景图片
在vue中设置背景图片 在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
- Android中如何根据图片url路径来获取网络图片
原文地址:Android中如何根据图片url路径来获取网络图片 1.根据图片的URL路径来获取网络图片,核心代码如下: public static Bitmap getBitmap(String pa ...
- vue中设置背景图片的方式
vue中设置背景图片 直接设置背景图片 动态设置背景图片 直接设置背景图片 1.在data中声明背景图片相关配置 export default {data () {return {// 顶部导航背景图 ...
- Linux中nginx配置图片访问路径
1.在Linux系统中下载nginx 这里介绍在ubuntu中下载nginx: https://blog.csdn.net/qq_23832313/article/details/83578836 2 ...
- HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。
img标签src路径图片无法显示的原因. 1.路径问题,路径可分为绝对路径和相对路径. (1)绝对路径:很多编译器不能把图片的绝对路径解析出来,因此图片无法在网页中显示,而且在开发过程中,一般都是使用 ...
最新文章
- 怎么git 自己建的服务器_Git服务器搭建，以及Git基本操作
- 【Android 热修复】Tinker 简介
- gtk 控件内存回收_咱们从头到尾说一次 Java 垃圾回收
- angular 数字逗号分隔,如何在Angular 4中为数字管道指定区域设置千位分隔符
- 按任意的字段旋转的存储过程
- 5-10transformation中部分函数使用
- fastdfs：安装nginx
- 高职计算机专业英语说课ppt,专业英语说课.ppt
- 【高等数学】九种二次曲面及其方程
- html5中正则表达式怎么加,HTML5中的字母正则表达式(Alphabetic Regex in HTML5)
- Word打开和关闭速度均很慢的解决方法
- JavaScript 时间格式化
- webscraper多页爬取_webscraper的常见爬取问题
- 实现保留3位有效数字（四舍六入五成双规则）
- Unity 创建Sprite导致的内存溢出奔溃问题
- 09 如何通过搜索引擎寻找海量的免费商用图片
- Pr学习（3）AI CC2017/2018 如何破解？
- English trip EM2-PE 3B Teacher:Olivia
- PHP 验证码图片无法正常显示
- 联想小新 Pad Plus 2023 款评测