如何在 Vite 样式绑定中使用资产 URL

Question

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但当我使用该background-image样式时会抛出 404。知道发生了什么吗？我将 Vue 3 与 TypeScript 和 Vite 2 结合使用。

这不会解析 URL：

<div style="background-image: url(./assets/img/header.png)"
></div>

但这确实：

<img src="./assets/img/header.png" alt="Header" />

Answer 1

URL 需要使用importin进行解析<script>。@vue/compiler-sfc不会自动解析 中的 URL <div>.style，但会自动解析 中的URL <img>.src，这就是您的第二个示例正常工作的原因。

解决方案

import在块中使用关键字<script>将解析后的图像 URL 公开给模板：

<script setup>
import imagePath from '@/assets/logo.svg'
</script>

<template>
  <div class="logo" :style="{ backgroundImage: `url(${imagePath})` }"></div>
</template>

<style>
.logo {
  height: 400px;
  width: 400px;
}
</style>

演示

Answer 2

这是因为vite默认无法处理别名，所以我们需要在vite配置文件中设置别名。

无需在脚本标签中设置导入图像。

只需将以下代码放入 vite.config.js 文件中

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "/src"),
      "~@": path.resolve(__dirname, "/src"),
    },
  },
});