图片有绝对路径 - 如何在 Laravel Mix 中使用子目录 URL

Posted 2023-02-22

【中文标题】图片有绝对路径 - 如何在 Laravel Mix 中使用子目录 URL

【英文标题】：Images have absolute path - How to use a subdirectory URL in LaravelMix

【发布时间】：2017-12-01 12:43:03

【问题描述】：

我的 Laravel Mix 应用程序将放置在服务器上的子目录中，例如：http://localhost/pat-os-server/public/

我的 vue 组件中的图像路径编译自

<img id="logo" src="../assets/img/pat_logo.png">

到

<img id="logo" src="/images/pat_logo.png">

由于应用程序所在的子目录，现在图像未显示。正确的路径应该是 images/pat_logo.png（相对 - 首选）或 /pat-os-server/public/images/pat_logo.png（绝对）

我尝试在 webpack.mix.js 中设置输出路径，如下所示：

mix.setPublicPath('/pat-os-server/public/');
mix.setResourceRoot('/pat-os-server/public/');

但这不会改变输出路径。它仍然是 /images/pat_logo.png。我希望它现在是 /pat-os-server/public/images/pat_logo.png。对 setPublicPath 和 setResourceRoot 使用其他值（包括“/”和“”）不会造成任何差异。

我已经在调用其他方法之前放置了路径设置方法，所以我现在的 webpack.mix.js 是这样的：

const  mix  = require('laravel-mix');

mix.setPublicPath('/pat-os-server/public/');
mix.setResourceRoot('/pat-os-server/public/');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

如何获取图像的相对输出路径或更改绝对路径？

感谢您的支持。

编辑

我刚刚意识到，在我的 laravel 项目中创建了一个子文件夹“pat-os-server”，并且所有编译的项目文件都复制到了这个子文件夹中。所以看来我误解了 setPublicPath 设置。

我不想将输出文件放到另一个文件夹中。我希望项目中的 URL 指向正确的路径，该路径不是主机/根目录，而是子目录。

【参考方案1】：

经过几个小时的搜索和试用，回答了我自己的问题。

现在我的 webpack.mix.js 看起来像这样：

const  mix  = require('laravel-mix');
mix
  .setResourceRoot("")
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

这将导致漂亮的相对 URL：

<img id="logo" src="images/pat_logo.png">

更多示例

使用mix.setResourceRoot("/") 获取到根目录的绝对路径（应该是默认的）：

<img id="logo" src="/images/pat_logo.png">

或者使用其他任何东西，例如mix.setResourceRoot("anything/there/"):

<img id="logo" src="anything/there/images/pat_logo.png">

干杯