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

Posted 2023-02-22

【中文标题】Nuxtjs - 图像可以从 HTML 加载，但不能从 css/scss 文件加载

【英文标题】：Nuxtjs - images can be loaded from HTML but not from css/scss files

【发布时间】：2019-08-11 09:58:09

【问题描述】：

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

            <span class="image"><img src="../assets/theme/images/pic01.jpg" ></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 加载。

【参考方案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');