vue读取后台图片数组地址并显示

读取后台图片方式

正常vue读取图片的方式是读取一个后台传过来这样子http://localhost:8081/img/20170419_110313f.jpg的后台地址，我们就可以读取到图片。

可是有的人可能比如我习惯了

  <img src="../../assets/img2/20170301-000.jpg">

所以我也想做个循环后台传个"…/…/assets/img2/20170301-000.jpg"这样子的图片数组地址过来，然后我读取到该数组就可以循环显示图片了。

可是我发现图片是显示不了的。

分析

经过分析和查找很多博客，我发现本地使用 img src="…/…/assets/img2/20170301-000.jpg 浏览器开发者工具地址的图片地址有点奇怪，
正常的应该是 http://localhost:8081/img/20170301-000.jpg
实际的地址 http://localhost:8081/img/20170301-000.5bd3a28f.jpg

结论

我理解，这其实是vue使用了require（…/…/assets/img2/20170301-000.jpg）加密了你的地址

解决

要解决概问题，其实只要你使用require.context处理一下你的地址就可以了

前端代码

<template>
   <div>
  <el-carousel-item v-for="item in img_list" :key=item.id>
      <img :src= item.filename >
      </el-carousel-item>
 </div>
</template>
<script>
export default {
   
  name: "Banner",

  data() {
   
    return {
   
      // 图片地址数组
      img_list: []
    };
  },
  mounted: function() {
   
    this.createcode(); //需要触发的函数
    // 首次加载时,需要调用一次
  },
  methods: {
   
    createcode()