vue3.2 img如何动态绑定图片

在 Vue 3.2 中，你可以使用 `v-bind` 或 `:` 来动态绑定图片。具体代码如下：

<template>
  <div>
    <img :src="imageUrl" alt="dynamic image" />
    <button @click="changeImage">Change Image</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageUrl = ref('https://example.com/image1.jpg');

    const changeImage = () => {
      imageUrl.value = 'https://example.com/image2.jpg';
    };

    return {
      imageUrl,
      changeImage
    };
  }
};
</script>

在上面的示例中，我们使用了 `ref` 来定义一个响应式的 `imageUrl` 变量，然后将其绑定到 `img` 标签的 `src` 属性上。当我们点击按钮时，`imageUrl` 的值会被更新，从而动态改变图片。

需要注意的是，如果你的图片路径是相对路径，需要确保它可以正确地被解析。通常情况下，你可以使用 `require` 函数来解决这个问题，例如：

<template>
  <div>
    <img :src="require(`../assets/${imageName}`)" alt="dynamic image" />
    <button @click="changeImage">Change Image</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageName = ref('image1.jpg');

    const changeImage = () => {
      imageName.value = 'image2.jpg';
    };

    return {
      imageName,
      changeImage
    };
  }
};
</script>

在上面的示例中，我们使用了 `require` 函数来引入图片，这样就可以正确地解析相对路径了。