uni-app image加载错误 404 替换为默认图片

**Uni-App Image 加载错误404 替换为默认图片**

在 Uni-App 开发中，图片加载是非常常见的需求。然而，在实际项目中，我们可能会遇到一些问题，如图片加载错误404 等。这篇文章将教你如何解决这种问题，并且替换为默认图片。

**问题描述**

当我们尝试加载一个不存在的图片时，Uni-App 会抛出一个404 错误。这个错误是由于图片 URL 不正确或图片文件不存在引起的。在这种情况下，我们需要在页面中显示一个默认图片，以避免用户看到错误信息。

**解决方案**

为了解决这个问题，我们可以使用 Uni-App 的 `image` 组件，设置一个默认图片，并且监听图片加载错误事件。具体步骤如下：

###1. 安装必要的依赖首先，我们需要安装 `@dcloudio/uni-app` 这个包，它包含了所有的 Uni-App 组件和工具。

bashnpm install @dcloudio/uni-app

###2. 创建一个页面组件接下来，我们创建一个新的页面组件，例如 `myPage.vue`：

html<template>
 <view>
 <!-- 加载图片 -->
 <image src=" mode="widthFix" @load="handleImageLoad" @error="handleImageError"></image>
 </view>
</template>

<script>
export default {
 methods: {
 // 处理图片加载成功事件 handleImageLoad(e) {
 console.log('图片加载成功');
 },
 // 处理图片加载错误事件 handleImageError(e) {
 console.log('图片加载错误');
 // 替换为默认图片 this.$set(this, 'defaultImage', true);
 }
 }
}
</script>

在上面的代码中，我们使用 `image` 组件来加载一个不存在的图片。我们监听了两个事件：`load` 和 `error`。当图片加载成功时，会触发 `handleImageLoad` 方法；当图片加载错误时，会触发 `handleImageError` 方法。

在 `handleImageError` 方法中，我们使用 `$set` 方法来设置一个新的属性 `defaultImage` 为 `true`。这个属性将用于显示默认图片。

###3. 创建一个组件来显示默认图片接下来，我们创建一个新的组件，例如 `defaultImage.vue`：

html<template>
 <view>
 <!-- 显示默认图片 -->
 <image src=" mode="widthFix"></image>
 </view>
</template>

<script>
export default {
 data() {
 return {
 showDefaultImage: false }
 },
 watch: {
 // 监听defaultImage属性的变化 'defaultImage': function(val) {
 if (val) {
 this.showDefaultImage = true;
 } else {
 this.showDefaultImage = false;
 }
 }
 }
}
</script>

在上面的代码中，我们创建了一个新的组件 `defaultImage.vue`。这个组件用于显示默认图片。当 `defaultImage` 属性为 `true` 时，会显示默认图片。

###4. 将两个组件结合起来最后，我们将两个组件结合起来。在 `myPage.vue` 中，我们使用 `` 来包含 `defaultImage.vue` 组件。同时，我们监听了 `defaultImage` 属性的变化，并且根据这个属性来显示默认图片。

html<template>
 <view>
 <!-- 加载图片 -->
 <image src=" mode="widthFix" @load="handleImageLoad" @error="handleImageError"></image>
 <!-- 显示默认图片 -->
 <default-image v-if="showDefaultImage"></default-image>
 </view>
</template>

<script>
import DefaultImage from './defaultImage.vue';
export default {
 components: { DefaultImage },
 data() {
 return {
 showDefaultImage: false }
 },
 watch: {
 // 监听defaultImage属性的变化 'defaultImage': function(val) {
 if (val) {
 this.showDefaultImage = true;
 } else {
 this.showDefaultImage = false;
 }
 }
 },
 methods: {
 // 处理图片加载成功事件 handleImageLoad(e) {
 console.log('图片加载成功');
 },
 // 处理图片加载错误事件 handleImageError(e) {
 console.log('图片加载错误');
 // 替换为默认图片 this.$set(this, 'defaultImage', true);
 }
 }
}
</script>

在上面的代码中，我们使用 `` 来包含 `defaultImage.vue` 组件。同时，我们监听了 `defaultImage` 属性的变化，并且根据这个属性来显示默认图片。

**总结**

通过以上步骤，我们可以解决 Uni-App 中图片加载错误404 的问题，并且替换为默认图片。在实际项目中，我们可以使用这种方法来处理图片加载错误的问题。