imagetools: Images don't show in dev mode with Laravel backend

If you try this plugin with a Laravel + Vite + Vue stack, all the images will throw a 404 (Not Found) error and not show on the page.

This is because the tool is returning relative paths and normally an asset URL imported through Vite would have an absolute URL, and in the context of a backend such as Laravel the lack of absolute URL breaks the images.

Assuming you’re running in dev mode Without imagetools loader ( normal image importing ):

import Cat from '@/images/cat.png'

console.log(Cat)
// Output: http://localhost:3000/resources/images/cat.png

With imagetools loader:

import Cat from '@/images/cat.png?width=200'

console.log(Cat)
// Output: /@imagetools/5812d5ee51f96cb9c239acca9f2ecc22bd83998a
// Throws a not found error.

Note that build works fine. It’s only a dev mode issue.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 28 (8 by maintainers)

Most upvoted comments

Hey folks, I have a working solution for this for the Laravel plugin.

For the Laravel folks in the thread, we will can shift out of here and into this issue: https://github.com/laravel/vite-plugin/issues/194

tl;dr; We need to expose a way for developers to say "Please prefix /@imagetools with the Vite dev server URL while in dev mode.

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

PR will be up shortly.

timacdonald on Jan 30, 2023

Glad the tool is starting working with other frameworks such as Nuxt and Rails, but unfortunately the Laravel support is not there yet.

@hopkins385 I checked with 4.0.16 and it still doesn’t work.

HassanZahirnia on Jan 24, 2023

After updating to vite-imagetools v4.0.16 I can confirm the images are getting resolved in Dev mode \o/, in a Nuxt 3 environment. 👍 (Haven’t checked Laravel yet)

<img src="/_nuxt/@imagetools/ac439a9cdb37db9a912abbf3f5fd377f36ecdab6">

hopkins385 on Jan 24, 2023