Nuxtjs - 图像可以从HTML加载，但不能从css / scss文件加载

Question

我的页面上的图像可以从HTML文件中读取（例如，当我有src标签并输入图像的相对路径时）。例如：

            <span class="image"><img src="../assets/theme/images/pic01.jpg" alt=""></span>

但是当我通过css/scss文件加载图像作为背景时，它们没有被加载。例如，这不会加载图像：

background-image: url("/assets/theme/css/images/close.svg");

@include vendor('background-image', ('linear-gradient(to top, #{$overlay}, #{$overlay})', url("/assets/theme/images/banner.jpg")));

background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("/assets/theme/images/banner.jpg");

我安装了file-loader和url-loader。如果我在file-loader的扩展部分中推送url-loader和nuxt.config，那么图像也不会从HTML加载。

Answer 1

您在CSS文件中使用绝对路径，而nuxt不会翻译它们。更改地址以使用@ alias：

 background-image: url("@/assets/theme/css/images/close.svg");