search

denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.17k stars 623 forks source link

Image tags don't load inside of an island #2303

Closed Pingar5 closed 7 months ago

Pingar5 commented 7 months ago

When I create an island that has <image> tags they do not load the image when hydrated clientside. No network request is made according to the developer console, it seems to just not register that there is image data to load. Switching the tags to <img> tags fixes the issue.

marvinhagemeister commented 7 months ago

@Pingar5 How can we reproduce the issue? What does the code look like that triggers it?

Switching the tags to tags fixes the issue.

I don't understand what this sentence means

Pingar5 commented 7 months ago

@marvinhagemeister Haha, sorry. I forgot to put the tags in code blocks, so GitHub interpreted them as html and hid them. I have edited the original post, let me know if it makes more sense now

marvinhagemeister commented 7 months ago

@Pingar5 Thanks for sharing the tag names. In HTML there is no <image> tag, it doesn't exist. Around 1993 some browsers supported it before a specification for HTML was formally created. The HTML specification went with <img> instead and all browsers followed suite and deprecated the <image>-tag. The <image> was never really a thing in HTML.

That's also the reason why this big red deprecation warning box is shown on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/image

Screenshot 2024-02-11 at 19 13 27

Any unknown tags are basically interpreted as a <div> element and those don't have any image loading capabilities. So when you try to use <image> the browser says: "I don't know what this is" and turns it into a div behind the scenes.

To load and display images on the web the <img> tag must be used.

<img src="path/to/my/img.jpg" alt="my description" />

You can find more information about the <img> tag on the relevant MDN page https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img