Nuxt3 背景图像不显示

Question

我正在开发一个 nuxt3 项目，想要使用图像作为背景，但我遇到了它没有显示在屏幕上的问题。

我按照Nuxt3中的记录放置了我的图像。

所以我尝试了：

<template>
    <div class="custom-background-image">
    </div>
</template>

<script setup>

</script>

<style scoped>
    .custom-background-image {
        background-image: url('~/assets/images/some-image.jpg');
    }
</style>

但是我的屏幕上没有显示图像。有人遇到同样的问题吗

Answer 1

如果您将图像存储在

assets

文件夹中。你可以在 CSS 中这样做。

~/assets/images/background.png

.custom-background-image {
    background-image: url('~/assets/images/background.png');
}

但是如果您将图像文件存储在

static

或

public

文件夹中，则可以像这样调用背景图像。

~/public/assets/images/background-image.jpg

.custom-background-image {
    background-image: url('/assets/images/background-image.jpg');
}