HTML Images not displaying...?

BEGINNERS & HELP
#1

John Whisamore

Jul 9, 2020, 11:08 AM GMT+2

Can’t seem to get an image other than photo icon. Any Ideas?

1440×692

#2

John,
I’m having the same issue. Did anyone ever get back to you?

#3

Hey @Eserr, @Samore, hope you guys are ok.

Would be great if you can share your code to check if the error come from a bad declaration or typo error.

You can share code properly by following this guide:
https://forum.ivanontech.com/t/faq-how-to-post-code-in-the-forum/35357/2

Carlos Z

#4 
<html>

  <head>
<title>Steve's website</title>
  </head>
  <body
  <h1>This is the Title</h1>

      <p>Welcome to Ivan on Tech coding course</p>
      <ul>
        <li>PROGRAMMING</li>
      <li>BLOCKCHAIN</li>
      <li>CRYPTOCURRENCY</li>
      <li>SMART CONTRACTS</li>
     </ul>
 <img src="https://www.pikpng.com/pngvi/hhhRbwb_small-star-icon-png-clipart/"/>

</body>
</html>
#5

I got it to work. Thanks!

1 Like
#6

I managed to get my image and hyperlink on the page buts its not aligned the same way as Ivans and I cant see really anything in the code that would cause this?? see my top image and code and ivans below image and code. what makes mine move over? Anyone have any idea’s.
image

image

#7

Hello everyone!

I figured out how to insert the image from my computer and coded it properly. I am still having trouble coding it from a website I have written the code like this:

 <html>

  <head>
    <title>Blockchain Career Change</title>

  </head>

  <body>

    <h1>My first line of Code that I wrote</h1>
    <h2>My first line of Code that I wrote and its smalllerrrrr</h2>
    <p>Welcome to my page</p>

      <h1>Tony's List!</h1>
        <ul>
          <li>step one</li>
          <li>step two</li>
          <li>step three</li>
        </ul>

<a href="https://google.se">click to google</a>

<h2>Me trying to code an image</h2>
<br><br>
<img src="https://www.en.wikipedia.org/wiki/Cat#/media/File:Cat_poster_1.jpg" alt="a fucking cat"/>

  <body>




</html>

I also just watched the video of @ivan explaining it and did the same thing and I am still not able to do it. I did exactly what he did and its not working. What am I doing wrong?

#8

I’ve just completed this excercise myself and got it to work after watching a youtube video on how to select images. can you give a screenshot of what was produced by your code? I might try your code just for the hell of it>

#9

hey tony, I used you code and it didnt work for the image. I then copied and used just the src in google search and it doesnt work there either so its looks like your address for the image file is the only thing wrong. I watched this clip on how to search for an image and get the file address.
https://www.youtube.com/watch?v=a8AvuiIP_Jw

you could also try stealing my scr (source code ref) and putting that in. the picture might not be as exciting as “a fucking cat” but hey see if it works!!!
https://thumbs-prod.si-cdn.com/Lk1u3QQFct1GBPwRse-JaaO1C4k=/800x600/filters:no_upscale():focal(978x630:979x631)/https://public-media.si-cdn.com/filer/db/82/db8234fc-f167-4285-82bd-123d035e32ad/cats.jpg

#10

Hey. Thank you for getting back to me.

I will try this later on today.

I am at work right now and just wanted to say thank you!

I used the alt=“a fucking cat” out of frustration as I have been having trouble getting this to work. Also, I am not a cat person.

Thank you!

#11

I loved that and wondered if it was frustration “a fucking cat”
Genialne!!!

1 Like
#12

Ok the video you sent me got me going! I can now do both from the computer and from the web. Thank you binklebonk. Love the name!

#13

Awesome!i didnt manage to do it from a computer file which is where i started so you’ve got one up on me. binklebonk is the name of a tree goblin in a childrens book called BAD JELLY THE WITCH.

#14

<img src="file name on the computer"/>

That’s how you do it with a picture on a computer if I am not mistaken. Be sure to put the image into the same folder as the .html file you have. I don’t know why you need to do that. Try it and let me know.

Where are you located? I am in Poland.

#15

I’m new at this; having trouble getting an image to show up.
Actually, I’m not sure I have the directories set up properly at the beginning of this lesson.
I watches it again, but still not certain about it. The instructor moves a bit quickly for absolute beginners.
I tried putting the image into folders in different places in my computer, then tried to store it on the editor itself (is that possible? : D)
Anything to help the editor find it…
Here is what I’ve done
Need help please…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First HTML Page</title>
</head>
<body>
    <h1>Hello, Moralis!</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Dolore explicabo repellat quos tenetur!</p>
    <h2>Part 1: Example</h2>
    <h3>Chapter 1: Metamask login</h3>
    <img src="./MacintoshHD/Metamask_login.png" 
    alt="Metamask Login">
    <h3>Chapter 2: Loading NFT's</h3>
    <h4>Section 2.1 BigBoy Pants</h4>
    <h4>Section 2.2 Pumpkins</h4>
    <h2>Building a DEX</h2>
    <ol>
        <li>Bitcoin</li>
        <li>Etherium</li>
        <li>Tether</li>
</ol>
<ul>
    <li>Bitcoin</li>
    <li>Etherium</li>
    <li>Tether</li>
</ul>
    <p>This is an Update</p>
</body>
</html>
1 Like
#16

Hey @FaronLee, hope you are well.

The usual way is to store all the images you will use for your website into the same folder, then you will have to specify the route of the file you want to show.

This folder should be on the same folder where you index.html is, that way the main folder of the project will be ./, from that point, lets say you have a folder called “images”, so the route for an image in your index file will be something like ./images/Metamask_login.png.

Here is also a video that explain this tag properly:
https://www.youtube.com/watch?v=_w6N_nplmAw

Carlos Z