Skip to content

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

@septatrix

Description

@septatrix

Description

Many people use vite as a simple static site generator without any JS framework and would like to transform static assets. Currently plugins can only transform assets when they are requested from JS files (or probably also CSS).
In the context of sites without any frameworks, however, it is common to reference the files simply from the HTML entrypoint.

Due to this, plugins like imagetools cannot apply transformation to these assets (JonasKruckenberg/imagetools#193) like resizing.

Suggested solution

Vite should also discover assets referenced from HTML files and invoke plugins for those. It seems like vite has to parse or at least have a concept of those anyhow for URL resolution:

export const assetAttrsConfig: Record<string, string[]> = {
link: ['href'],
video: ['src', 'poster'],
source: ['src', 'srcset'],
img: ['src', 'srcset'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}

Alternative

Some plugins seem to emulate this function by parsing the HTML using a regex to discover those assets. This is rather hacky and also way less reliable. Furthermore, as vite seems to parse the HTML anyhow, it would be more performant to handle this correctly.

Additional context

I am not quite sure but while looking for similar issues I found #5098. I do not think it is about the same problem but they might share some common aspect(?)

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions