Question

我的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 （相对 - 首选）或< strong> /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指向正确的路径，该路径不是主机/根，而是指向子目录。

Answer 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');

这将导致漂亮的相对网址：

<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">

干杯

图像具有绝对路径 - 如何在LaravelMix中使用子目录URL

1 个答案: