通过 npm 编译它会更改图像路径

Posted 2023-03-07

【中文标题】通过 npm 编译它会更改图像路径

【英文标题】：by npm compilation it changes the image path

【发布时间】：2019-01-31 21:46:20

【问题描述】：

我正在使用带有 npm 的 Laravel 框架。 在 scss 文件中，我有图像路径：

background-image: url("../../img/frontend/payments.png");

通过编译，当我打开 styles.css 并查找该图像时，路径如下：

background-image: url(/images/payments.png?464788fabc66a26cf02344b0dcbcdde2);

如何更改该路径，因为我所有的图像都在 img/ 文件夹中。

还有一件事情让我很困扰。我需要复制 resources/sass 文件夹中的 payment.png，该文件夹正在复制 public/images 中的那张图片。所以我有每张照片的副本。是否有可能将我的所有图像都保留在 public/img 文件夹中？

【参考方案1】：

如果你使用 Laravel mix，url 会因为 webpack url 处理而改变。 您可以在official documentation 中了解更多信息。

tldr

mix.options(
    processCssUrls: false
);

关于重复资源（如您提到的图片）：将原始资源保留在 resources 目录中，并使用 Laravel mix 将它们复制到 public 文件夹中。这背后的原因是有时您想要处理资源然后复制它们。例如，首先优化 png 文件，然后将它们复制到 public 文件夹，同时将原始文件保留在资源目录中。