图像具有绝对路径-如何在LaravelMix中使用子目录URL [英] Images have absolute path - How to use a subdirectory URL in LaravelMix

问题描述

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

My Laravel Mix app will be placed in a subdirectory on the server like: http://localhost/pat-os-server/public/

我的vue组件中的图像路径是从

An image's path in my vue component compiles from

<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 (绝对)

Now the image is not shown due to the subdirectory the app is in. The correct path should be either images/pat_logo.png (relative - prefered) or /pat-os-server/public/images/pat_logo.png (absolute)

我试图像这样在webpack.mix.js中设置输出路径:

I've tried to set the output path in webpack.mix.js like this:

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使用其他值(包括"/"和")不会造成任何差异.

But that doesn't change the output path. It's still /images/pat_logo.png. I expect it to be /pat-os-server/public/images/pat_logo.png now. Using other values for setPublicPath and setResourceRoot including "/" and "" doesn't caused any difference.

我已经在调用其他方法之前放置了路径设置方法，所以我当前的webpack.mix.js看起来像这样:

I've placed the path setting methods before calling other methods, so my current webpack.mix.js looks like this:

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

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

How do I get a relative output path for my images or change the absolute path?

感谢您的支持.

修改

我刚刚意识到，在我的laravel项目中创建了一个子文件夹"pat-os-server"，并将所有已编译的项目文件复制到该子文件夹中.所以看来我误解了setPublicPath设置.

I've just realized, that a subfolder "pat-os-server" was created inside my laravel project and all compiled project files where copied into this subfolder. So it seems I missunderstood the setPublicPath setting.

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

I don't want to place the output files into another folder. I want the URLs in my project to point to the correct path which is not the host/root but a subdirectory.

推荐答案

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

Answering my own question after a couple of hours of search and trial.

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

Now my webpack.mix.js looks like this:

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

这将导致漂亮的相对URL:

This will lead to beautifull relative URLs:

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

更多示例

使用mix.setResourceRoot("/")获取到根的绝对路径(应为默认路径):

Use mix.setResourceRoot("/") to get an absolute path to the root (should be default):

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

或使用诸如mix.setResourceRoot("anything/there/")的其他任何内容:

Or use anything else like mix.setResourceRoot("anything/there/"):

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

欢呼

这篇关于图像具有绝对路径-如何在LaravelMix中使用子目录URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！