vue3 动态展示图片

Vue 3中动态展示图片通常是指根据不同的条件或数据动态改变`<img>`标签的`src`属性，从而展示不同的图片。这可以通过Vue的响应式系统来实现，下面是一些基本步骤：

1. 在Vue组件的data函数中定义一个变量来存储图片的路径。
2. 在模板中使用`:src`指令（或`v-bind:src`）绑定这个变量到`<img>`标签的`src`属性上。
3. 根据应用的状态或用户的交互改变这个变量的值，Vue将自动更新DOM，展示新的图片。

一个简单的示例代码如下：

<template>
  <div>
    <img :src="imageSrc" alt="示例图片" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始图片路径
      imageSrc: 'path/to/default/image.jpg',
    };
  },
  methods: {
    // 当需要更换图片时调用此方法
    changeImage(newPath) {
      this.imageSrc = newPath;
    }
  }
}
</script>

在上述代码中，`imageSrc`是绑定到`<img>`的`src`属性上的变量。组件初始化时会显示默认图片，当调用`changeImage`方法并传入新的图片路径时，图片会更新为新的图片。