介绍 Ionic Vue Image SRC

Ionic Vue 框架是近年来非常流行的开发框架之一，它提供了丰富的组件和功能，使得应用开发变得更加快捷和高效。其中，涉及到图片的展示和处理，是应用开发中不可或缺的一部分。本文将重点介绍 Ionic Vue 中处理图片的 src 属性。

IonImg 组件

Ionic Vue 中提供了 <ion-img> 组件来展示图片，该组件是对原生 <img> 标签的封装，因此可使用所有原生 <img> 标签属性，如 alt、class、style 等。在使用 <ion-img> 组件时，可以将图片的相对路径或绝对路径作为 src 属性的值。

示例代码：

<ion-img src="./assets/images/example.png" alt="example"></ion-img>

处理动态图片路径

在应用中，通常需要动态地改变图片的路径来实现不同的展示。此时，需要使用 Vue 中的动态绑定语法 :，将组件的 src 属性绑定到 Vue 实例中的数据。同时，为了获得更好的用户体验，可以在加载图片时添加 loading 效果，当图片未加载完成时，显示加载中的提示。

示例代码：

<template>
  <ion-img :src="imageUrl" alt="example" @loading="showLoading = true" @error="showError = true"></ion-img>
  <ion-spinner :hidden="!showLoading"></ion-spinner>
  <ion-icon name="warning" :hidden="!showError"></ion-icon>
</template>

<script>
import { IonImg, IonSpinner, IonIcon } from '@ionic/vue';

export default {
  components: {
    IonImg,
    IonSpinner,
    IonIcon,
  },
  data() {
    return {
      imageUrl: './assets/images/example.png',
      showLoading: false,
      showError: false,
    };
  },
};
</script>

使用 IonThumbnail 组件

当需要在应用中展示缩略图时，可以使用 <ion-thumbnail> 组件。该组件同样是对 <img> 标签的封装，并支持 src 属性。同时，为了达到更好的展示效果，可以在 <ion-thumbnail> 组件上嵌套一个 <ion-img> 组件，实现图片的加载及展示。

示例代码：

<ion-thumbnail>
  <ion-img src="./assets/images/example.png" alt="example" @click="showFullImage"></ion-img>
</ion-thumbnail>

总结

<ion-img> 组件是展示和处理图片的重要组件，通过绑定动态路径，可方便地实现图片的切换和展示。同时，使用 <ion-thumbnail> 组件可以实现图片的缩略图展示效果。在实际应用开发中，应根据实际需求选择适合的展示方式。