【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>


目录
相关文章
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
JavaScript
vue知识点
vue知识点
4 1
|
2天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
2天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
11 0
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
2天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
10 0
|
2天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
2天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
11 0
|
3天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
8 0
|
3天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
8 0