Tribute Page (image loading problem)

HTML-CSS
#1

Hi,

I have a problem with the loading of the image on the tribute page, I use the right code but when I tried to copy the URL from the browser upper bar and paste it into the inverted commas of the code it is not screened on the site. I’ve used the two sample images from freeCodeCamp and it works perfectly so I guess my code is right. I’ve also used the web “imgBB” to fix it and in this case it is screened but I cannot resize. Can anyone help me sort it out?

<div id="img-div">
    <img id="image" src="<a href="https://imgbb.com/"><img src="https://i.ibb.co/KK6sCBK/hqdefault.jpg" alt="hqdefault" border="0"></a>" alt="Elon Musk"/>
 <div id="img-caption">``

Link to the challenge:

#2

are you trying to make a link of the image? you are nesting elements in the wrong way.
you will need to do

<a>
   <img>
</a>

the src of an image should be the url of the image, the one you copy from the url bar
the href of the anchor element should be the link to which it brings

this is what you have, I have put a tag on each line. Not much sense.
Try starting from the snippet above and add properties when you want them.

<img id="image" src="
   <a href="https://imgbb.com/">
      <img src="https://i.ibb.co/KK6sCBK/hqdefault.jpg" alt="hqdefault" border="0">
   </a>
" alt="Elon Musk"/>
#3

I tried with imgBB because it was the only way to see the image on the screen what I wanna do is to put the image between the header and the paragraph because when I copy the url bar and paste it into the url

<img id="image" src="https://www.hibridosyelectricos.com/articulo/virales/seguidores-tesla-ford-enfrentan-raiz-tuit-elon-musk/20180704171037020271.html" alt="Elon Musk"/>

nothing shows up on the tribute site

#4

this is not an image, it is an html page. try right clicking on the image and copying the image url. to check that it is the right url open it in a new browser tab. If it opens the image then it is the right url, if it opens a web page it is not

for example this is an image url:

but you can’t put an anchor element as src of an image element

#5

Yeah, now it works. But how do you get the url of the image?, because I clicked on it and it kept screening the site url, not the picture url. I even downloaded the image and put the file into the code and the problem didn’t get solved

#6

you can right click on an image and chose “copy image url” if you find it online, you can upload the image in a dedicated service and use that link, like you did with imgbb (you just need to be careful on the code you are given and know that you can’t put an a tag in the src attribute)

or once you start building a project with various files you can put the image in those files and reference it directly from the project itself (you may want to research a bit on the proper way to do this once you start)

you can’t put the image in your computer and use the file directory, as that would make it visible only from your own computer

#7

I don’t see copy image url option for google image search. I’m looking for any public images url which I can use in the code; kindly clarify.

Thanks,
Vikram

#8

if you right click on any image it will be between the options

remember that you should also search for images that have the right copyright, you can use the google image search options to filter by licence

1 Like