Invoking on html #193

bronze · 2021-09-24T19:24:06Z

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

The text was updated successfully, but these errors were encountered:

RafidMuhymin · 2021-11-27T09:33:07Z

@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} />

victoralbino · 2021-12-08T19:59:02Z

I am having the same problem when building a static website.
Is there any other way to apply?

JonasKruckenberg · 2021-12-10T09:10:38Z

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.

ivanq3w · 2021-12-10T09:11:59Z

I created demo repo for Vue here
#214

JonasKruckenberg · 2021-12-10T09:21:02Z

I created demo repo for Vue here

#214

As far as I can see that has nothing to do with importing from html though.

pierremouchan · 2022-01-30T10:45:52Z

Any update on this one? I would like to call the plugin directly on the img src as well

supermoos · 2022-02-03T13:25:04Z

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>

JonasKruckenberg · 2022-02-04T08:08:40Z

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.

supermoos · 2022-02-04T08:21:20Z

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

JonasKruckenberg · 2022-02-04T08:28:06Z

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 👍🏻

supermoos · 2022-02-04T08:37:19Z

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 · 2022-02-04T08:48:48Z

Yes that is perfect 👍🏻

supermoos · 2022-02-04T09:11:05Z

@JonasKruckenberg Here you go: https://github.com/supermoos/imagetools-issue

xIRaguit · 2022-02-06T00:33:21Z

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 😁

andreacfromtheapp · 2022-05-12T08:53:47Z

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 :)

septatrix · 2022-11-26T23:27:12Z

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 etc.

septatrix · 2022-11-28T14:39:33Z

Just as a reference, I created "Invoke plugins for assets in html (e.g. img src)" upstream

ghost · 2023-01-24T13:25:29Z

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.

Maytha8 · 2023-02-25T05:57:26Z

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.

nicomt · 2024-11-27T04:40:58Z

I think I found the issue.
The problem seems to only happen in dev mode.
The Vite Vue plugin has a condition to load assets from the base directly while in devmode for performance reasons.
https://github.com/vitejs/vite-plugin-vue/blob/plugin-vue%405.2.1/packages/plugin-vue/src/template.ts#L136

I think this doesn't let the transform asset URL option to work correctly.
You can force it to transform asset URLs by adding this to the vite.config.js

export default defineConfig({
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: true,
        },
      },
    }),
    imagetools(),
  ],
});

This comment was marked as off-topic.

Sign in to view

septatrix mentioned this issue Nov 28, 2022

Invoke plugins for assets in html (e.g. img src) vitejs/vite#11099

Closed

4 tasks

benmccann changed the title ~~Calling imagetools from img src?~~ Invoking on html Apr 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Invoking on html #193

Invoking on html #193

bronze commented Sep 24, 2021

RafidMuhymin commented Nov 27, 2021 •

edited

Loading

victoralbino commented Dec 8, 2021

JonasKruckenberg commented Dec 10, 2021

ivanq3w commented Dec 10, 2021

JonasKruckenberg commented Dec 10, 2021 •

edited

Loading

pierremouchan commented Jan 30, 2022

supermoos commented Feb 3, 2022 •

edited

Loading

JonasKruckenberg commented Feb 4, 2022

supermoos commented Feb 4, 2022

JonasKruckenberg commented Feb 4, 2022 •

edited

Loading

supermoos commented Feb 4, 2022 •

edited

Loading

JonasKruckenberg commented Feb 4, 2022

supermoos commented Feb 4, 2022

xIRaguit commented Feb 6, 2022

andreacfromtheapp commented May 12, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

septatrix commented Nov 26, 2022

septatrix commented Nov 28, 2022

ghost commented Jan 24, 2023

Maytha8 commented Feb 25, 2023

nicomt commented Nov 27, 2024

Invoking on html #193

Invoking on html #193

Comments

bronze commented Sep 24, 2021

RafidMuhymin commented Nov 27, 2021 • edited Loading

victoralbino commented Dec 8, 2021

JonasKruckenberg commented Dec 10, 2021

ivanq3w commented Dec 10, 2021

JonasKruckenberg commented Dec 10, 2021 • edited Loading

pierremouchan commented Jan 30, 2022

supermoos commented Feb 3, 2022 • edited Loading

JonasKruckenberg commented Feb 4, 2022

supermoos commented Feb 4, 2022

JonasKruckenberg commented Feb 4, 2022 • edited Loading

supermoos commented Feb 4, 2022 • edited Loading

JonasKruckenberg commented Feb 4, 2022

supermoos commented Feb 4, 2022

xIRaguit commented Feb 6, 2022

andreacfromtheapp commented May 12, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

septatrix commented Nov 26, 2022

septatrix commented Nov 28, 2022

ghost commented Jan 24, 2023

Maytha8 commented Feb 25, 2023

nicomt commented Nov 27, 2024

RafidMuhymin commented Nov 27, 2021 •

edited

Loading

JonasKruckenberg commented Dec 10, 2021 •

edited

Loading

supermoos commented Feb 3, 2022 •

edited

Loading

JonasKruckenberg commented Feb 4, 2022 •

edited

Loading

supermoos commented Feb 4, 2022 •

edited

Loading