vue3动态引入img

在Vue3中，动态引入图片通常使用`<img>`标签结合计算属性或者动态绑定`src`属性来实现。这是因为浏览器在页面加载时会先解析静态内容，所以直接将图片的URL写在HTML里可能会导致图片未加载完成就显示默认图标。以下是两种常见的做法：

1. **计算属性**:

<img :src="getImgSrc('image-url')">

然后在Vue实例中定义计算属性 `getImgSrc`:

export default {
  data() {
    return {
      imageUrl: '初始图片url',
    };
  },
  computed: {
    getImgSrc() {
      // 当你需要切换图片时，返回新的url
      return this.imageUrl;
    }
  },
};

2. **动态绑定**:

<img v-bind:srce="'image-url' + (imageUrl ? '/' + imageUrl : '')" />

这里`imageUrl`是一个变量，在需要更新图片时设置它。