imagetools
imagetools copied to clipboard
JonasKruckenberg
Invoking on html
Hi
Anyone knows if there is a way to call imagetools transformation directly from the html?
Like <img src="./image.jpg?width=300;500;700&format=webp;avif;png" />
cheers
@bronze if it's JSX, then try the following syntax :
<img src={(await import("./image.jpg?width=300;500;700&format=webp;avif;png")).default} />
I am having the same problem when building a static website. Is there any other way to apply?
Can one of you provide a quick repro that I can check out? This definitely doesn't seem right, so I'd like to investigate.
I created demo repo for Vue here https://github.com/JonasKruckenberg/imagetools/discussions/214
I created demo repo for Vue here
https://github.com/JonasKruckenberg/imagetools/discussions/214
As far as I can see that has nothing to do with importing from html though.
Any update on this one? I would like to call the plugin directly on the img src as well
It doesn't work for me either. All I did was create an index.html like below:
None of them seem to get processed by imagetools, except maybe the one with @imagetools - however it doesn't transform it in anyway. Did a previous version support this correcly? https://www.npmjs.com/package/vite-plugin-imageset @JonasKruckenberg
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<img class="videoCardPoster" src="@imagetools/../assets/img/placeholder-01.jpg?size=100x100" alt="placeholder" />
<img class="videoCardPoster" src="/assets/img/placeholder-01.jpg?size=100x100" alt="placeholder" />
<img class="videoCardPoster" src="assets/img/placeholder-01.jpg?size=100x100" alt="placeholder" />
<script type="module" src="/src/main.ts"></script>
</body>
</html>
None of them seem to get processed by imagetools,
So again. The problem with all vite related file processing plugins is, that they are entirely dependent on vite picking up that specific import. If vite doesn't tell imagetools about an import there is not much I can do.
If you could create a minimal repro using the html you showed I will have a look if there is something I can do 👍🏻
Did a previous version support this correcly? https://www.npmjs.com/package/vite-plugin-imageset
Not at all, please don't use that version, it hasn't been updated in a year and is deprecated for a reason.
This plugin actually works with html defined img src's, I wonder if it's approach can be used to add this functionality to this plugin, as your plugin all in all seems better: https://www.npmjs.com/package/vite-plugin-html-images
This plugin actually works with html defined img src's, I wonder if it's approach can be used to add this functionality to this plugin, as your plugin all in all seems better: https://www.npmjs.com/package/vite-plugin-html-images
I know this approach is a possibility, but it's a workaround that requires this plugin to parse the html - which seems kinda awkward - so I have been avoiding this for a long time.
Maybe this is something to fix upstream in vite, but if nothing helps and enough people would benefit, this could be a solution.
I would still appreciate you creating a quick repro so I can test against it 👍🏻
Sure I can do that. It would just be a blank project with your plugin installed, and 1 <img src="..."> in the index.html file. Is that okay?
@JonasKruckenberg Here you go: https://github.com/supermoos/imagetools-issue
I love the idea of using this great plugin for static HTML websites or even with handlebars partials. Would save me from lots of image resizing in Photoshop 😁
FWIW: I too would like this to be possible. Currently not working here. Using Vite, Elm, Tailwind CSS: https://github.com/gacallea/anerandros.info/blob/main/src/elm/Main.elm#L508 -- not sure where the issue lies, posting just my 2c :)
I've found myself wanting this for a basic Vite powered static site too.
For Svelte projects you can use https://github.com/bluwy/svelte-preprocess-import-assets
So again. The problem with all vite related file processing plugins is, that they are entirely dependent on vite picking up that specific import. If vite doesn't tell imagetools about an import there is not much I can do.
Do you (or anyone else) happen to know if there is any upstream work to support this use case? Otherwise it might be a a good idea to raise this issue upstream.
This is potentially useful in many different circumstances: run sharp on raster graphics, run svgo on SVGs, generate different favicon resolutions, video/audio processing, select PDFs subset for
Are there any updates on this? This is a really necessary feature, as many build sites without a framework. Sometimes, for the simplest websites, they are not needed, but the ability to optimize images is very necessary, for which this plugin is ideal.
There's an open pull request upstream (vitejs/vite#11138) but it's being held off and is planned on being implemented in Vite 5.
