css - 无法弄清楚在 background-image : url(); to get a certain image in a Vue. js 元素中使用什么路径

Question

目前我有一个带有此文件树的 Vue.js 元素(仅显示相关文件夹和文件):

root
    src
        assets
            image.jpg
        components
            header.vue
    index.html

所以在 header.vue 组件中，我有这个 CSS 代码:

.background-image {
    background-image: url();
}

我需要引用 assets 文件夹中的 image.jpg 文件。我尝试了很多不同的组合，但从未见过图像，所以我就是想不通。

Answer 1

您可以尝试以下方法:

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

如果它没有显示，一个可能的原因是元素 .background-image 没有高度，尤其是当它还没有任何内容时。尝试添加 padding 或 height。

.background-image {
  background-image: url("../assets/image.jpg");
  padding: 50px;
}