Vue动态显示图片，图片不显示怎么解决

Question

问题是这样的，我想实现轮播图的图片显示，但是图片路径是存在数据库中，目前只能拿到数据中图片路径，却显示不了，想问问各位大佬们，怎么解决。

在网上也查了资料，

说：可以使用require使图片显示,当然也操作了，发现如果使用require显示图片的话感觉就跟数据库的图片路径就没有关系(特别强调：个人观点)。

如下图：使用require显示图片的,()

整体的代码是这样的

<div style="height: 420px">
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in this.imgs" :key="item.id">
      <h3 class="medium"> <img :src="img" alt="" width="100" height="100"></h3>
     <!-- <h3 class="medium"><img src="../../assets/xy.jpg" height="400" width="100%"/></h3>-->
    </el-carousel-item>
  </el-carousel>
</div>

<------ Script 代码 ------>
export default{
    name: 'HolleWord',
    data () {
        return{
            img: require('@/assets/xy.jpg'),
        }
    }

}

从此往下的代码是从数据库查出来的图片路径，

<div class="bzjyc-div-2">
    <div style="height: 420px">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in this.imgs" :key="item.id">
          <h3 class="medium"> <img :src="item.image" alt="" width="100" height="100"></h3>
         <!-- <h3 class="medium"><img src="../../assets/xy.jpg" height="400" width="100%"/></h3>-->
 </el-carousel-item>
      </el-carousel>
    </div>
</div>


<---------  Script 代码  ---------->
export default{
    name: 'HolleWord',
    data () {
        return{
            imgs:{}, 
        }
    }
}
mounted:function(){
    axios({
        methods : 'get',
        url : config.baseURL +  '/api/****/***/findAll',
    }).then(res=>{
        this.imgs = res.data;
    }).catch(error=>{
        console.log(error.data);
    }),
}

效果图如下：

Answer 1

路径不对呗，看下this.images的值是啥，能不能直接访问

Answer 2

看一下浏览器控制台呗,
图片地址是相对路径吧,你这个图片地址需要使用 require的,
不然不会编译成真实路径的