image - 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 不会翻译它们。更改地址以使用@别名:

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