Images breaking in cert projects

Can someone help? I’m embarrassed to ask but I don’t understand what I’m doing wrong, the last 3 cert projects I have not been able to get any images to display whether off the web or off my own computer. I tried using a closing and that does not work nor wrapping in a

or

. I also turned off all extensions in case that was the problem. What am I missing? Here is an example of html I am working on right now and I’m only getting a broken image in the preview with the alt text:

photo of Jenni Earll sitting outside at a cafe table

Thanks!

Ha! I forgot to fix it so you could see:

img src=“file:///Users/TJ/Downloads/jenni_photo%20copy.jpg” alt=“photo of Jenni Earll sitting outside at a cafe table”

If this is from your local collection, it will not work. However, you could upload it to one of the photo share hosting sites ,and use it from there.

Or, if you have it online on a website, you could probably use it from there.

Open it in a new tab and copy that link to use for the src.

That is how i use my home photos.

Pixabay, pexels and some others are free sites.

1 Like

That’s good to know, thanks!

But I still can’t figure out why images I’m linking from the web won’t work either, though. I took an image from Flikr, a free image that is available for use with attribution, but it still isn’t working. But if I copy and paste it in a new tab it works just fine. Do I need to use one of those sites for any image? An example below:

img src=“Latent Heat of Fusion | Image from a selection of technical … | Flickr” alt=“image of engineering technical drawing”

This is not a jpg, jpeg, nor png image for the link, and I tried and does not work.
You could try pexels, which is a free photo, video image site. Or maybe pixabay. There are others.
You can find some great free photos on pexels, i am sure.

1 Like

As said, you can’t use local files like that. It would be a huge security risk if I was able to connect to your local file system like that. Just think about it, I would be able to access any file on your system.


For the flickr image, you can click the share button and use the embed code you get to the image URL

https://live.staticflickr.com/65535/50772638196_d59d7d7e5b_h.jpg

As for files hosted you have to make sure you get the actual image link and that it is using https. Usually, you can right-click the image and open it in a new tab then copy that URL.

2 Likes

Thank you for the help!! That makes complete sense I wouldn’t want strangers poking around in my computer.

I figured out how to get the flickr image to work with the embed code, but I’m still not getting images to work from Pixabay or anywhere else with the link provided. So I really don’t know what is going on here if the html works with one link but not another then it seems like it can’t be the code, but I don’t have a clue what the problem is. I wish I could figure this out because I’m spending so many hours on the image problem I don’t feel like I can progress until I get it resolved.

1 Like

Usually, images are shown on pages and the URL in the browser you see is for the page, not the image.

If you right-click the image and from the menu use “Open in new tab” (or something like that) it will open the actual image up in a new tab. That URL is the actual image URL.

Aaaack!!! Finally, I found the copy image address option, not the copy link option, that worked. This seemed so much harder than it should have been and I appreciate everyone’s patience with my questions!

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.