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

最新推荐文章于 2024-01-10 20:30:05 发布

manonggui

最新推荐文章于 2024-01-10 20:30:05 发布

阅读量4.3k

点赞数

分类专栏： vue开发文章标签： vue java

本文链接：https://blog.csdn.net/manonggui/article/details/107497755

版权

博客讨论了如何在Vue中处理从后端获取的相对图片路径数组，通过require.context转换图片地址以正确显示图片。分析指出，由于Vue对图片路径进行了加密，导致直接使用相对路径无法显示。解决方案是使用require.context对后台传来的图片路径进行处理。

摘要由CSDN通过智能技术生成

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()