时间戳

首页 > 解决方案 > Nuxtjs - 图像可以从 HTML 加载，但不能从 css/scss 文件加载

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

问题描述

我页面上的图像可以从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. 如果我 pushfile-loader并url-loader在中扩展部分nuxt.config，则图像也不会从 HTML 加载。

标签： imagevue.jssassresourcesnuxt.js

解决方案

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

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

推荐阅读