bundling relative images with Vite doesn't seem to work? #43000

godbout · 2022-06-29T17:38:17Z

godbout
Jun 29, 2022

i'm following the docs from here: https://laravel.com/docs/9.x/vite#url-processing

my blade file is in resources/views/index.blade.php. my image is in resources/img/pointer.png. in the index file in point to my image as <img src="../img/pointer.png">. if i got the doc correctly, this should be caught by Vite and bundled. it's not. i end up with the exact same <img src="../img/pointer.png"> in my HTML and of course the image cannot be found.

anyone has any idea? thanks.

epcgrs · 2022-06-29T19:23:14Z

epcgrs
Jun 29, 2022

if you are using blade, why you dont use the asset() method?
ex: asset('/img/pointer.png')

https://laravel.com/docs/9.x/helpers#method-asset

0 replies

godbout · 2022-06-30T05:18:59Z

godbout
Jun 30, 2022
Author

hey, thanks. this is not a blocking issue. i used a static path and put my file in the public folder. the point is to understand why the new Vite system doesn't bundle images, like the documentation is describing.

5 replies

epcgrs Jun 30, 2022

ah ok, sorry but I don't have enough knowledge with Vite to answer you.

godbout Jun 30, 2022
Author

no worries. thanks for answering in the first place :))
yes, Vite is new. i had no idea either but it's now within the latest versions of Laravel. was starting a new site so i'm rolling with it!

UltraWelfare Jul 6, 2022

I hit the same issue.

As far as I understand, vite pre-processes the files defined in defineConfig on vite.config.js. So in this case, the src="..." is defined in the blade.php file not being processed by vite therefore not working correctly. You would need the asset helper in order to make it work correctly and place the image in the public path yourself.

Another (rather cumbersome) workaround would be to drop img element and instead use a div (or something else) alongside with a CSS file that would target that element with background-image: url("..."). That way when vite pre-processes the CSS file, it would correctly generate the URL.

godbout Jul 7, 2022
Author

As far as I understand, vite pre-processes the files defined in defineConfig on vite.config.js. So in this case, the src="..." is defined in the blade.php file not being processed by vite therefore not working correctly.

ah. that would make sense yeah. i didn't think too much about it. thanks for the guidance. i had added something like the image file types into Vite config but maybe it's not done for that. didn't dig too much as this is for a marketing page for a Mac app. not web dev. thanks again!

RodgerOliver Jul 13, 2022

I hit the same issue.

As far as I understand, vite pre-processes the files defined in defineConfig on vite.config.js. So in this case, the src="..." is defined in the blade.php file not being processed by vite therefore not working correctly. You would need the asset helper in order to make it work correctly and place the image in the public path yourself.

Another (rather cumbersome) workaround would be to drop img element and instead use a div (or something else) alongside with a CSS file that would target that element with background-image: url("..."). That way when vite pre-processes the CSS file, it would correctly generate the URL.

But what if the image needs to be bundled? Can Vite do that?

lodekib · 2022-07-27T10:05:32Z

lodekib
Jul 27, 2022

i'm following the docs from here: https://laravel.com/docs/9.x/vite#url-processing

my blade file is in resources/views/index.blade.php. my image is in resources/img/pointer.png. in the index file in point to my image as <img src="../img/pointer.png">. if i got the doc correctly, this should be caught by Vite and bundled. it's not. i end up with the exact same <img src="../img/pointer.png"> in my HTML and of course the image cannot be found.

anyone has any idea? thanks.

Did you succeed? Would suggest you try @/resources/img/pointer.png . check this

4 replies

godbout Jul 27, 2022
Author

i kinda forgot about it :D i mean yes, i "succeeded" in the sense i used another way. i was just getting confused whether the doc was wrong or i was doing something wrong (latter more probable).

P4KM4N Jul 27, 2022

It is working for me in my CSS file which is bundled by Vite, but I tried on inside my blade file and it's not working for me, it is outputting the @/images/whatever.png and not converting it.

RoCampos Aug 4, 2022

I'm having the same trouble with using this approach @/resources/img/pointer.png

tobia Aug 11, 2022

I can only presume they've written the docs for @/resources/img/image.png because it was planned, but they released the Vite pipeline before that part was completed. For now I'm importing all my images in CSS or JS, because that's the only way to get hot reload in dev and versioning in build. I'm not using public except as a last resort.

freemiumdev · 2022-07-28T08:24:10Z

freemiumdev
Jul 28, 2022

Hi,
I am in the same situation and the problem still remains. has anyone solved it?

0 replies

wizzymore · 2022-07-28T13:19:48Z

wizzymore
Jul 28, 2022

Vite's URL Processing works in the files bundled by Vite ( which .blade.php files are not ).

2 replies

P4KM4N Jul 28, 2022

Make total sense! 😅 Anyway I'll probably use Glide to manipulate my image in the end, so everything is ok :)

godbout Jul 28, 2022
Author

i think i've seen somewhere that there's an update to some of the core npm package that takes care of stuff within Blade files too now. but haven't checked myself yet.

adamramadhan · 2022-08-12T17:08:08Z

adamramadhan
Aug 12, 2022

it works on dev server with vite_asset helper but yeah still confused if theres automatic image detection and move it into the build/images folder too, but it seems its not working.

1 reply

innovaweb-dev Aug 12, 2022

Same problem and vite_asset not works
Call to undefined function vite_asset()

<img src="{{ vite_asset('/file.png')  }}" alt="" height="16" width="16"/>

innovaweb-dev · 2022-08-12T17:35:30Z

innovaweb-dev
Aug 12, 2022

    <img src="img/sign_warning.png" alt="" height="16" width="16"/>
    <img src="resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img src="public/images/sign_warning.png" alt="" height="16" width="16"/>
    <img src="images/sign_warning.png" alt="" height="16" width="16"/>
    <img src="@/resources/img/sign_warning.png" alt="" height="16" width="16"/>
    <img src="@/resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img :src="/resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img :src="@/resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img :src="./resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img src="./resources/images/sign_warning.png" alt="" height="16" width="16"/>
    <img src="{{resource_path('images/sign_warning.png')}}" alt="" height="16" width="16"/>
    <img src="{{asset('images/sign_warning.png')}}" alt="" height="16" width="16"/>
    <img src="@vite('resources/images/sign_warning.png')" alt="" height="16" width="16"/>
    <img src="@vite('images/sign_warning.png')" alt="" height="16" width="16"/>
    <img src="@vite('sign_warning.png')" alt="" height="16" width="16"/>

I tried all combination as possible, nothing.
Only files which called from css or JavaScript are loaded.

A PHP framekork which need Javascript just to load images, it amazing.
Great progress !!!

2 replies

tobia Aug 12, 2022

Yes, it does not seem to work. If you can, use CSS (background-image) which works, otherwise for the time being just put it in public.

Uolsen Aug 13, 2022

Yes, it does not seem to work. If you can, use CSS (background-image) which works, otherwise for the time being just put it in public.

Yeah but what if you want to use versions? And then if you would like to use the image in CSS as background and as <img> then there will be two different images. One for CSS “served” by vite and one copied into /public directory?

And inside the documentation of laravel (https://laravel.com/docs/9.x/vite#url-processing), there is only a showcase for the .vue file. Why? The blade is the main templating engine for Laravel. There should be a showcase of how to serve static images inside .blade.php files.

Mohammed-Taher · 2022-08-12T20:04:31Z

Mohammed-Taher
Aug 12, 2022

LaravelVite documentation states that the @ symbol should resolve to http://localhost:5173/... but this happens currently in Javascript files only.

For .blade.php files I solved this issue by declaring ASSET_URL key in .env file:

ASSET_URL=http://localhost:5173/resources/images

now you can pass the image file name to asset() function in blade templates:

<img src="{{ asset('image.png') }}" />

1 reply

lukas-frey Aug 13, 2022

How will this work in production though?

makowskid · 2022-08-26T16:17:55Z

makowskid
Aug 26, 2022

Solved

You have to follow this
https://laravel.com/docs/9.x/vite#working-with-blade-and-routes

meaning, you have to add
import.meta.glob([ '../images/**', ]);
into
resources/js/app.js

and also make sure you have facade alias defined:
'Vite' => \Illuminate\Support\Facades\Vite::class,
in your config/app.php

then you can use
tyle="background-image: url('{{ Vite::asset('resources/images/photo.jpg') }}')"
etc..

9 replies

ShellarFX Oct 23, 2022

Hello. I tried this, but i have an error

Could not resolve entry module (resources/images/*).
error during build:
Error: Could not resolve entry module (resources/images/*).
    at error (file:///Users/admin/PhpstormProjects/market/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at ModuleLoader.loadEntryModule (file:///Users/admin/PhpstormProjects/market/node_modules/rollup/dist/es/shared/rollup.js:22369:20)
    at async Promise.all (index 6)

bundling relative images with Vite doesn't seem to work? #43000

Replies: 9 comments · 24 replies

godbout Jun 30, 2022 Author

godbout Jun 30, 2022 Author

godbout Jul 7, 2022 Author

godbout Jul 27, 2022 Author

godbout Jul 28, 2022 Author

Replies: 9 comments 24 replies

godbout
Jun 30, 2022
Author

godbout Jun 30, 2022
Author

godbout Jul 7, 2022
Author

godbout Jul 27, 2022
Author

godbout Jul 28, 2022
Author