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

Posted 2023-02-22

【中文标题】如何在与 Vite 的样式绑定中使用资产 URL

【英文标题】：How to use asset URLs in style binding with Vite

【发布时间】：2021-08-17 00:24:39

【问题描述】：

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但是当我使用 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"  />

【参考方案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

【参考方案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"),
    ,
  ,
);

【讨论】：

OP 没有在 URL 中使用别名。此外，设置别名不会自动解析<div> (demo) 样式绑定中的路径。