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

谁践踏了优雅 2023-07-07 08:26 26阅读 0赞

#### 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'`就可以显示出来，就像下面代码这样

--------------------

#### 2、解决方案 ####

###### （1）解决方案一 ######

用require将src包裹起来，如下

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

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

###### （2）解决方案二 ######

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

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

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

如果图片不是放在static文件夹下面，那么系统会先做一步编译工作，将图片编译成static文件夹的路径，图片才可以显示出来  
![20200222021239568.png][]  
这个路径我们在data中定义的是`require('@/assets/img/kefu.png')`，在这里被编译成了`/static/img/kefu.8f8acce.png`

我们直接将图片放在static文件夹下面，就不需要这部分的编译工作了  
![20200222021612931.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>

[20200222021239568.png]: https://img-blog.csdnimg.cn/20200222021239568.png
[20200222021612931.png]: https://img-blog.csdnimg.cn/20200222021612931.png