我想从我的资产文件夹中放置一张背景图片。当我使用图像标签时,图像显示正确,因此图像放置得很好,但是当我使用背景图像样式时会抛出 404。知道发生了什么吗?我将 Vue 3 与 TypeScript 和 Vite 2 结合使用。
<div style="background-image: url(./assets/img/header.png)"
></div>
<img src="./assets/img/header.png" alt="Header" />
答案 0 :(得分:2)
网址需要 require
d。 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>