vue3+vite4 如何动态使用本地图片

在Vue3中，可以使用`require()`函数动态引入本地图片：

<template>
  <div>
    <img :src="image1" alt="">
    <img :src="image2" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image1: null,
      image2: null
    }
  },
  mounted() {
    // 引入本地图片
    this.image1 = require('@/assets/image1.jpg')
    this.image2 = require('@/assets/image2.jpg')
  }
}
</script>

在上面的例子中，我们通过`require()`函数动态引入了两张本地图片，并将其赋值给了`image1`和`image2`变量。在模板中，我们使用`<img>`标签来显示这些图片，属性`src`的值绑定到对应的变量即可。

需要注意的是，`require()`函数只能在模块的顶层作用域中使用。如果需要在函数或条件语句中引入图片，可以使用`import()`函数动态加载模块，再使用`default`属性获取模块的默认导出。

<template>
  <div>
    <img :src="image" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null
    }
  },
  mounted() {
    // 动态引入本地图片
    import('@/assets/image.jpg').then(module => {
      this.image = module.default
    })
  }
}
</script>

在上面的例子中，我们使用`import()`函数动态引入了一张本地图片，并将其赋值给了`image`变量。需要注意的是，`import()`函数返回一个Promise，需要通过`.then()`方法获取模块的默认导出。