How to add a backgorund image on Vite

Issue

I want to put a background image from my assets folder. When I use an image tag, the image is show properly, so the image is well placed, but throw me a 404 when I use the background-image style. Any idea about what is happening?. I am using Vue 3 with TypeScript and Vite 2.

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

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

Solution

The URL needs to be required. The Vue template compiler does not automatically require the URLs in <div>.style, but it does for <img>.src.

Use a computed prop to require the image:

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

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

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

Answered By - tony19