4

I'm in the learning stage of vite and replacing the laravel-mix with vite. Now i'm facing a situation that how can I reference images in laravel blades which are passed as entry point in the vite-config?

 plugins: [
    vue(),
    laravel({
        input: [
            'resources/assets/js/app.js',
            'resources/assets/sass/app.scss',
            'resources/assets/img/icon-lock.svg'
        ],
        refresh: true,
    }),
    viteCommonjs,
],

how can I reference the above image which created from vite bundler in the laravel blade? Also I wondered that by adding images as entry point it creates two files(versioned file + an empty js junk). enter image description here

but if I import the image into the app.js file instead of adding into the entry point, then there is no empty js chunk file is created... enter image description here

so what's the difference between adding images as entry point and importing via js?

Pranab V V
  • 1,386
  • 5
  • 27
  • 53
  • did you manage to figure out the correct way to reference the images? – Érycson Nóbrega Sep 15 '22 at 22:06
  • @ÉrycsonNóbrega to referece an image in balde you need to use `src="{{ Vite::asset('route/to/resources/images/yourimage.png') }}"` – avn Oct 21 '22 at 19:15
  • @Pranab V V my understanding from the documentation is that the entrypoints allow you to either bulk include all configured entypoints or allow you more granular control to selectively include entrypoints by making use of @tag directive. So including all assets in `app.js` means that you won't be able to selectively include assets whereas individual entry points would. [From the docs](https://laravel-vite.dev/guide/features/entrypoints.html#usage) – avn Oct 21 '22 at 19:31

0 Answers0