Question

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

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

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

Answer 1

网址需要 required。 Vue 模板编译器不会自动require <div>.style 中的 URL，但它会为 <img>.src。

使用计算道具require图像：

<template>
  <div :style="headerStyle"></div>
</template>

<script setup>
import headerImgUrl from './assets/img/header.png'

const headerStyle = `background-image: url(${headerImgUrl}); height: 100px`
</script>

如何在 Vite 上添加背景图片

1 个答案: