Image URL as a web component attribute

[gdbaldw]

My web component takes an image URL as an attribute. In dev mode, all works perfectly. But, Rocket build renames the image URL, and does not update the web component's attribute. Is there a filter to update the image URL? Or a configuration to pass through images without changing the URL?

[daKmoR]

so you have something like

<my-el img="./path/to/file.jpg"></my-el>

does the file get copied over? what is the output in build and what is the actual file URL?

[gdbaldw]

Yes. Though in my case it data from markdown front matter, and the data is absolute from root.

  ---
  image_url: /foo/bar.jpg
  ---

and my njk template is like this

  <my-el image_url="{{ image_url | url }}"></my-el>
  <img src="{{ image_url | url }}">

The img element is correct with the file copied and renamed, and my-el is...

  <my-el image_url="/foo/bar.jpg"></my-el>
  <img src="../xxxxx.jpg">

[gdbaldw]

So, I tried what you may be hinting, using src as attribute name.

  <my-el src="{{ image_url | url }}"></my-el>
  <img src="{{ image_url | url }}">

Similar result, but now also have reference errors.

  <my-el src="/foo/bar.jpg"></my-el>
  <img src="../xxxxx.jpg">

Error: ❌ Found 2 missing reference targets (used by 2 links) while checking 14 files

[daKmoR]

ah so you use it in two places

  <!-- a custom tag will not be checked or modified -->
  <my-el image_url="{{ image_url | url }}"></my-el>
  
  <!-- this will find the image and copy/hash and adjust this src -->
  <img src="{{ image_url | url }}"> 

so if you only use <my-el image_url="{{ image_url | url }}"></my-el> then it should not be copied/hashed or adjusted...

now if you were to put the image into docs/_assets/_static/test.jpg and then insert it like so

<my-el src="{{ image_url | asset | url }}"></my-el>

then I think it should work as all _static images are copied as is and the URL would then not be touched. This however means if you use it as a normal image somewhere as well that it will be duplicated once renamed and hashed once statically copied

Ideally, you would be able to adjust which tag and which attribute gets defined as an asset... but that API is currently not there 😅. the tools used is https://modern-web.dev/docs/building/rollup-plugin-html/

[gdbaldw]

Thank you for the clarification. Maybe, for rollup-plugin-html...

params.extractAssets: boolean | { tag: string, attributes: string[] }[]

Case statements in the plugin src might be preceded by a params.extractAssets.forEach

It a minor issue for me now, so I'm monkey patching attributes in my _site files.

[gdbaldw]

Pull request https://github.com/modernweb-dev/web/pull/1541 submitted. The request is intended to close this issue (and save me from monkey patching my _site files).