Images have absolute path - How to use a subdirectory URL in LaravelMix

Question

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

An image's path in my vue component compiles from

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

To

<img id="logo" src="/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)

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

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.

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?

Thanks for your support.

Edit

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.

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.

kirschkern · Accepted Answer · 2017-06-28 11:32:01Z

14

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

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

This will lead to beautifull relative URLs:

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

More Examples

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

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

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

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

Cheers

answered Jun 28, 2017 at 11:32

kirschkern

1,4171 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Images have absolute path - How to use a subdirectory URL in LaravelMix

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related