如何解决uniapp开发中图片错误显示默认图片的问题

1. 问题背景

在uniapp开发中，我们经常需要使用图片。但是有时候，当图片未加载成功时，会出现默认图片的情况。这给用户带来了不好的体验，因此需要解决这一问题。

2. 解决方法

2.1 使用图片加载事件

可以使用图片的onload事件来判断图片是否已经加载成功，如果加载成功，则不显示默认图片。

<template>
  <img src="{{imgSrc}}" v-if="loaded" />
  <img src="/static/default.png" v-else />
</template>
<script>
export default {
  data() {
    return {
      imgSrc: '/static/img.jpg',
      loaded: false
    }
  },
  mounted() {
    const img = new Image();
    img.src = this.imgSrc;
    img.onload = () => {
      this.loaded = true;
    }
  }
}
</script>

如果图片加载成功，则将loaded设为true，然后在标签中使用v-if指令来判断是否显示该图片。

2.2 使用onerror事件

使用图片的onerror事件可以判断图片是否加载失败。如果失败，则显示默认图片。

<template>
  <img :src="imgSrc" alt="" @error="onImageError" />
</template>
<script>
export default {
  data() {
    return {
      imgSrc: '/static/img.jpg'
    }
  },
  methods: {
    onImageError(e) {
      e.target.src = '/static/default.png';
    }
  }
}
</script>

当图片加载失败时，调用onImageError方法，在方法中修改标签的src属性为默认图片的地址。

2.3 使用CSS样式

使用CSS的background-image属性来加载图片，然后设置默认图片为背景图片。当图片加载成功时，再将背景图片设为已加载成功的图片。

<template>
  <div :style="{ backgroundImage: 'url(' + imgSrc + ')'}" class="img-container"></div>
</template>
<script>
export default {
  data() {
    return {
      imgSrc: '/static/img.jpg',
      loaded: false
    }
  },
  mounted() {
    const img = new Image();
    img.src = this.imgSrc;
    img.onload = () => {
      this.loaded = true;
      const container = document.querySelector('.img-container');
      container.style.backgroundImage = 'url(' + this.imgSrc + ')';
    }
  }
}
</script>

使用CSS样式的好处是可以通过CSS属性控制图片的宽度和高度，因此，可以更好地控制图片的布局。

3. 总结

在uniapp开发中，图片的默认显示问题是比较常见的。但是，我们可以通过使用图片的onload和onerror事件，以及CSS样式，来解决这一问题。希望本文的内容能够对您有所帮助。