vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题

下面我将为您详细讲解“vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题”的完整攻略。

一、问题描述

在使用vue3和vite搭建前端项目时，我们可能会遇到动态引入图片的问题。具体而言，我们需要在vue3的template中动态引入图片资源进行展示，但是在打包部署的时候，我们发现图片路径出现错误，导致图片无法显示。因此，我们需要解决动态引入图片路径的问题，保证图片能够正确显示。

二、解决方案

在使用vue3和vite搭建前端项目时，我们可以采用以下三种方案来解决图片路径问题：

1. 使用public目录

我们可以将图片资源放置于public目录中，然后在vue3中使用绝对路径引入，这样即使在打包之后，图片也能正确引用到。代码示例如下：

<template>
  <img :src="imgUrl"/>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '/img/logo.png'
    }
  }
}
</script>

其中，public目录结构如下：

public/
  └── img/
      └── logo.png

2. 使用@别名

我们可以在vite的配置文件vite.config.js中为assets目录使用别名，然后在vue3中使用这个别名引入图片资源。代码示例如下：

<template>
  <img :src="imgUrl"/>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '@/img/logo.png'
    }
  }
}
</script>

其中，vite.config.js的配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src/assets'
    }
  }
})

3. 使用import语法

我们可以使用ES6中的import语法，在Vue3组件中动态引入图片资源。代码示例如下:

<template>
  <img :src="imgUrl"/>
</template>
<script>
import logoImg from '@/img/logo.png'

export default {
  data() {
    return {
      imgUrl: logoImg
    }
  }
}
</script>

其中，import语法会将图片资源直接打包到Vue3组件中，因此在打包后也能够正常引用。

三、解决路径错误的问题

在使用上述方法时，有时我们可能会遇到打包后图片路径错误的问题。此时，我们可以通过修改vite.config.js中的base选项，指定项目在部署时的根路径。这样就可以解决打包后图片路径错误的问题了。代码示例如下：

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/my-app/',
  resolve: {
    alias: {
      '@': '/src/assets'
    }
  }
})

四、总结

以上就是vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题的完整攻略。我们可以根据具体需求选择不同的方案，保证图片资源能够在vue3组件中正确引用。