vite 如何引用本地图片

在Vite中引用本地图片需要通过以下步骤：

1. 将本地图片放置在项目的静态文件夹中。通常情况下，静态文件夹的名称为`public`或`static`，你可以选择其中一个作为静态资源的存放位置。

2. 在需要引用图片的组件或模块中，使用相对路径引用图片。例如，如果图片位于静态文件夹的根目录下，可以使用`/`开头的相对路径，如`/image.jpg`。如果图片位于静态文件夹的子目录下，可以使用相对路径，如`/assets/images/image.jpg`。

3. 在模板中使用引用图片路径的方式。在Vue组件的模板中，可以使用`src`或`:src`指令来加载图片。例如，在`<img>`标签中，可以使用`<img src="/image.jpg" />`这样的语法。

需要注意的是，Vite会在构建时自动将静态文件夹的内容拷贝到输出目录中，所以在构建后的项目中，引用的本地图片的路径可能会有所变化。如果需要在模板中引用构建后的图片路径，可以通过`import.meta.env.VITE_BASE_URL`获取前缀路径，然后拼接上相对路径来使用。

总结来说，引用本地图片需要将图片放置在静态文件夹中，并使用相对路径在组件中引用图片。在构建后的项目中，可以使用`import.meta.env.VITE_BASE_URL`获取前缀路径来拼接图片的相对路径。

相关问题

Vue3+ts+vite中怎么引用本地图片

在Vue3项目中使用TypeScript (TS) 和Vite构建时，引用本地图片通常有两种常见的方式：

1. 使用`import()`函数：

// 引入图片路径
const imagePath = require('./assets/images/myImage.jpg');

// 或者直接将图片作为属性绑定到组件内
<img :src="imagePath" alt="My Image">

这里假设图片文件位于`./src/assets/images`目录下。

2. 使用`@/assets/images`这种路径别名：
在你的`.vite.config.ts`配置文件里添加路径别名：

import { resolve } from 'path'
export default defineConfig({
  alias: {
    '@': resolve(__dirname, './src'),
    images: resolve(__dirname, './src/assets/images')
  },
  // ...
})

然后在模板中引用图片：

<img :src="@/images/myImage.jpg" alt="My Image">

注意：确保运行时环境能够访问到指定的图片路径，如果在打包后的静态资源文件夹里，可能还需要配置`publicPath`。

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()`方法获取模块的默认导出。