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

Question

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但是当我使用 background-image 样式时会抛出 404。关于发生了什么的任何想法？我正在使用带有 TypeScript 和 Vite 2 的 Vue 3。

这不能解析 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"),
    },
  },
});