1

My M.O. for using images in CSS is this:

  • All images are somewhere in /public (typically /public/img) in order to be easily loadable by any style, script or view with an absolute path /
  • In my SCSS files I refer to the images with an absolute path starting with / :
body {
    background: url('/img/body-bg.png');
}

I am migrating from Mix to ViteJS and all of my old code is written like this. It makes total sense and the images can be just as well be loaded by anything else, for example my blade files:

<img src="/img/logo.png" />

Now ViteJS somehow does not like it and according to other answers wants me to refer to images like this in CSS:

body {
    background: url('/public/img/body-bg.png');
}

or like this in Blade files:

<img src="{{ Vite::asset('public/img/logo.png') }}" />

According to ViteJS documentation I should be able to say what / means with either the base or the publicDir settings but they don't seem to have any effect in vite.config.js file.

Is there a way to make ViteJS work the way Mix did? I don't care about image versioning and frankly don't want the bundling process to copy all my images from somewhere else into the /public/build directory. I want to keep them where they are and just load them normally with /img/image.png.

Ian Pollak
  • 83
  • 11

1 Answers1

0

You don't reference the public folder, when your app is live that public folder should be the root of your web directory.

You should read through the documentation: https://laravel.com/docs/9.x/vite

The default setting is to use the same path as what is used in the vite.config.js. Then use the vite blade directive e.g.

@vite(['resources/js/users-form.js'])

The blade directive will load the proper path for you to the bundled version in the public folder.

Wenzz
  • 370
  • 4
  • 15
  • Loading the bundle is not the problem. The problem is referencing images (or other assets, like fonts) from within the bundles. I've read the Laravel Vite documentation top to bottom. The problem is similar to the one described in the ["URL processing" chapter](https://laravel.com/docs/9.x/vite#url-processing) but what is described there does not work for images referenced with `url()` within stylesheets. – Ian Pollak Nov 25 '22 at 15:59
  • @IanPollak You might find this question helpful: https://stackoverflow.com/questions/73416067/how-to-make-laravel-vite-copy-static-assets-versioned-to-build-folder I believe you need to be using a relative path in your SASS file – Wenzz Nov 25 '22 at 16:31