Image is downloading rather than Rendering to the DOM

Wondering why the image keeps downloading rather than rendering to the DOM? It works when using the img element, but it’s not working when using the href element as it shows in the video at 4min 30secons.

You browser probably doesn’t know that Beaty.jfif is an image file that can be rendered so it downloads it instead as it would do with other binary files. I’ve personally never seen an jfif file and had to google what that is.

I’d suggest you start with the materials provided my Mosh (Mosh.jpg is in the zip attached below the video in lesson 5) before experimenting with you own files.

Understood. Thank you for the feedback SAM.

Since this uses JPEG compression, does it work to rename the file to *.jpg?

I did a quick check. Using *.jfif in Chrome it downloads the file. If you change the file name from *.jfif to *.jpg, then it renders the image.