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

【问题标题】：Nuxtjs - images can be loaded from HTML but not from css/scss filesNuxtjs - 图像可以从 HTML 加载，但不能从 css/scss 文件加载
【发布时间】：2023-04-10 05:58:01
【问题描述】：

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

【问题讨论】：

标签： image vue.js sass resources nuxt.js

【解决方案1】：

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

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

【讨论】：

ModuleNotFoundError: Module not found: Error: Can't resolve './@/assets/images/something.png'
@ 必须是路径的第一段。您要么使用相对路径，要么在路径的开头使用 @。
在 css 中我写了 background: url('@/assets/images/something.png') 评论显示 nuxt 错误

【解决方案2】：

这在资产或静态文件夹中对我有用

.class-name {
  background-image: url('~static/images/image-name.jpg');
}

.class-name {
  background-image: url('~/static/images/image-name.jpg');
}

.class-name {
  background-image: url('~@/static/images/image-name.jpg');
}

【讨论】：