【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来

简介: 【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来

1、具体情况


将图片放在src/assets/img文件夹下面,循环图片的话,图片显示不出来

就像下面这样,图片是显示不出来的


<template>
  <div v-for="img_url of images">
    <img :src="img_url">
  </div>
</template>
<script>
  export default {
    data(){
    return{
    images:['@/assets/img/kefu.png','@/assets/img/yuyue.png']
    }
  }
  }
</script>


但是如果直接在<img/>标签上面将src定义为'@/assets/img/kefu.png'就可以显示出来,就像下面代码这样


<template>
  <img src="@/assets/img/kefu.png">
</template>

2、解决方案


(1)解决方案一


用require将src包裹起来,如下


images:[require('@/assets/img/kefu.png'),require('@/assets/img/yuyue.png')]


这样再循环图片就可以显示了


(2)解决方案二


如果不想在data中将图片路径写死,而是想放在json文件或者数据库中加载,上面这种方法就不合适了


就得看为什么本来图片加载不出来,用require将路径包裹起来才可以加载图片


因为在vue项目中,唯一可以外部访问的文件是static文件夹,src文件夹是不可以通过外部访问的,只能我们内部代码调用。


如果图片不是放在static文件夹下面,那么系统会先做一步编译工作,将图片编译成static文件夹的路径,图片才可以显示出来


image.png


这个路径我们在data中定义的是require('@/assets/img/kefu.png'),在这里被编译成了/static/img/kefu.8f8acce.png


我们直接将图片放在static文件夹下面,就不需要这部分的编译工作了


image.png


放在static文件夹之后,不需要require引用图片路径,图片也可以加载出来


<template>
  <div v-for="img_url of images">
    <img :src="img_url">
  </div>
</template>
<script>
  export default {
    data(){
    return{
      //将图片放在了static路径下面
    images:['/static/img/kefu.png','/static/img/yuyue.png']
    }
  }
  }
</script>


目录
相关文章
|
3天前
|
JavaScript
vue知识点
vue知识点
10 3
|
8天前
|
JavaScript
|
7天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
21小时前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1017 0
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
9天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
9天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
9天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
14天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
23 1