Vue中图片问题合集

目录

1.背景

2.版本

3.问题集

1）Vue中使用图片不显示

2）Vue上传文件第一次触发，第二次不触发

3）使用Swiper时，图片动态返回

4）轮播图的循环播放失效

---

1.背景

在使用Vue+ElementUI进行前端工程开发中，遇到一些图片的问题，包括上传、回显等。这里做一些记录，方便以后查看

2.版本

npm	6.14.12
vue-admin-template	4.4.0
axios	0.18.1
element-ui	2.13.2
vue-awesome-swiper	^3.1.3

3.问题集

1）Vue中使用<img :src="...">图片不显示

解决方法：使用require()

这里，item为后台接口返回的一个对象，包含有url属性，即图片链接。

// 若后台未返回url，则使用默认图片
<img :src="item.url?item.url:require('@/assets/default.jpeg')" />

参考：

Vue <img :src=""/> 图片不显示 - 大毛啊 - 博客园

Vue中img的动态src不显示图片_花铛-CSDN博客

Vue 中img图片加载失败解决方案 - des杜甫 - 博客园

2）Vue上传文件第一次触发，第二次不触发

解决方法：在上传的事件中，清空一下file即可

  methods: {
    handleAvatarSuccess(response, file) {
      if (/*"上传成功的判定条件"*/) {
        this.$message({
          showClose: true,
          message: "上传成功!",
          type: 'success'
        });
      }else{
        this.$message({
          showClose: true,
          message: "上传失败!",
          type: 'error'
        });
      }
      file = "";          // 这里清空一下      
    },

  ...

}

参考：Vue上传文件或图片第一次触发，第二次不触发的问题_Kino的博客-CSDN博客

3）使用Swiper时，图片动态返回

使用vue-awesome-swiper对banner进行自动播放。一开始图片是固定的两张，后来改为从后台接口获取，这样可以将banner所用的图片管理起来

<swiper :options="swiperOption" v-if="banners.length">
  <swiper-slide
    v-for="item in banners"
    :key="item.sort"        // banner中的播放顺序由后台定义的sort字段决定
    :style="{
      backgroundImage: 'url(' + item.imageUrl + ')',
      backgroundPosition: 'center center',
      backgroundSize: 'cover',
    }"
  >
</swiper-slide>

...

export default {
  data() {
    return {
      banners: [],        // 给返回值定义一个变量
      swiperOption: {
        spaceBetween: 8,
        loop: true,
        centeredSlides: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
      },
      swiperList: this.banners,        // 引用定义的变量
      // 原先固定的两张图片
      // [
      // {
      //   imageUrl: require("~/assets/photo/banner1.png"),
      // },
      // {
      //   imageUrl: require("~/assets/photo/banner2.png"),
      // },
      // ],
    };
  },

参考：

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay) - lezuw - 博客园 

vue中使用swiper-slide时，循环轮播失效？

4）轮播图的循环播放失效

解决方案：增加v-if属性。代码如上一示例

v-if="banners.length"