Vue3 + Vite 动态引入图片指南

1. 使用 require 动态引入图片

在 Vue3 + Vite 项目中，可以使用 require 方法来动态引入图片。require 方法返回一个 Promise 对象，因此您需要使用 async/await 或 .then() 方法来处理它。

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.png'
    }
  },
  async created() {
    const image = await require(`@/assets/images/${this.imageUrl}`)
    this.image = image.default
  }
}
</script>

2. 使用 import 动态引入图片

在 Vue3 + Vite 项目中，也可以使用 import 方法来动态引入图片。import 方法返回一个 Promise 对象，因此您也需要使用 async/await 或 .then() 方法来处理它。

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.png'
    }
  },
  async created() {
    const image = await import(`@/assets/images/${this.imageUrl}`)
    this.image = image.default
  }
}
</script>

3. 处理图片资源

在 Vue3 + Vite 项目中，动态引入的图片资源需要进行处理，才能在模板中显示。您可以使用 <img> 标签来显示图片，并通过 src 属性来指定图片的路径。

<template>
  <img :src="image" alt="Image description" />
</template>

4. 技巧与注意事项

• 在 Vue3 + Vite 项目中，动态引入的图片资源需要放在 public 目录下，才能被正确解析。
• 您可以在 vite.config.js 配置文件中配置图片资源的别名，以方便引入。
• 您可以在 webpack.config.js 配置文件中配置图片资源的压缩和优化。
• 您可以在 package.json 配置文件中配置图片资源的处理任务。

希望本文能帮助您在 Vue3 + Vite 项目中动态引入图片。如果您有任何疑问，欢迎在评论区留言。