如何在 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 需要在 <script> 中用 import 解决。 @vue/compiler-sfc 不会自动解析 <div>.style 中的 URL，但会自动解析 <img>.src，这就是为什么您的第二个示例可以正常工作的原因。

解决方案

在 <script> 块中使用 import 关键字将已解析的图像 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>

demo

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"),
    },
  },
});

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

How to use asset URLs in style binding with Vite

css

vue.js

vuejs3

vite

解决方案