Facing problem to add photo

Hi Everyone,
I am facing problem to add a photo in Codepen for my portfolio project. Here is the link to my portfolio project,

Thank You

Ok your problem is here, right?
<img class="img-responsive" src="https://drive.google.com/file/d/1NRb55Gssq6MeAZPKXFiwxg7z6cZ9NJ0w/view" alt="image"

The thing is: you’re not using the correct link to your image. This link is “where” your image is, not the image itself.
The real link of your image is: https://lh3.googleusercontent.com/GfI5QojHNHEJUG9a9bjRkZUajq1TTmL1gRuF_RnmSPjOjCgGc4j-hDy2JUDVhsxhgez6DxZvh26GOHYYB9tX=w1256-h551-rw

Just replace the wrong link and it should work.

How did I get the link? If put your cursor on top of the image and click the right button of your mouse you’ll see an option “Copy image link…” (or something like that).

1 Like

Thank you for the response. But still this is not working.

The problem with ThaisGO was that the link from her post was to .webp file. I downloaded your image, hosted it on imgur on link https://i.imgur.com/pAr2RG2.jpg, and it works now.
Here is the HTML:

<img class="image-profile"src="https://i.imgur.com/pAr2RG2.jpg" alt="image">

All you have to do now is style it.

The only problem with that is imgur doesn’t like being linked in codepens. So while that image link might work for a little while, eventually it will break.
Happened to me in my tribute projects. What I ended up doing was hosting images in my google drive and linking to them. But there’s a trick to it though.

After you upload your image to GD right click on it and select “Get Shareable Link” and you’ll be presented with something that looks like this for example: https://drive.google.com/open?id=random string of numbers and letters

BUT…you can’t just use that link in your html, there’s one more thing you have to do and that’s edit the url just a tiny bit. See that “open?” part of the url? You have to change that so it says “uc?” instead. So in the end the url will look like this:

https://drive.google.com/uc?id=random string of numbers and letters

I’m sure there are other file hosting sites out there that will play nicely with codepen, but I found GD worked for me in a pinch (also since it looks like you’re already trying to use GD, this should help you out). I’ve seen folk using dropbox to host images as well but I’m not familiar with the process.

1 Like

The way you have it right now,

<img src="https://drive.google.com/drive/u/5/my-drive/DSC06725.JPG" alt="image">

will only link a person to their own Drive. Where’s the original image from? The web? Your own files?

Thank you so much. Its working now.