Images are not getting displayed again, Please help

Images are not getting displayed again, Please help
0.0 0

#1

Below is my code.

I have placed images in the w3images folder and also index.html is outside of w3images.

Satish Awesome Project body {font-family: "Lato", sans-serif}

Los Angeles

We had the best time playing at Venice Beach!

New York

The atmosphere in New York is lorem ipsum.

Chicago

Thank you, Chicago - A night we won't forget.

<header class="w3-container" id="portfolio">

<h1 class="w3-center"><b>My Portfolio</b></h1>

<hr>

<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
  <img src="/w3images/Tribute.jpg" alt="Mountain" style="width:100%" class="w3-hover-opacity">
  <div class="w3-container w3-white">
    <p><b>Lorem Ipsum</b></p>
    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  </div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
  <img src="/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
  <div class="w3-container w3-white">
    <p><b>Lorem Ipsum</b></p>
    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  </div>
</div>
<div class="w3-third w3-container">
  <img src="/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
  <div class="w3-container w3-white">
    <p><b>Lorem Ipsum</b></p>
    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  </div>
</div>
Norway

Lorem Ipsum

Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

Norway

Lorem Ipsum

Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

Norway

Lorem Ipsum

Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

CONTACT

Fan? Drop a note!

Bangalore, India
Phone: +8886488864
Email: satish@freecodecamp.com
SEND

Written and Coded by SATISH


#2

I’m not exactly sure what problem you’re having. But …

Have you tried removing the leading / from those URLs?

<img src="w3images/Tribute.jpg" ... >

#3

I have the images placed locally, not from online. I hope that is what u mean, right?


#4

Hey after removing the slash it worked, but .mySlides {display: none} means images won’t work, why is that. So instead on none what else can be used.


#5

?

I think it depends on your file hierarchy / structure. If your file/folder structure is like this:

/project/index.html
/project/w3images/Tribute.jpg

You don’t include a leading / in your paths in index.html. Instead of /w3images/imagename.jpg it’s just w3images/imagename.jpg.

edit:
Re: display: none;

Maybe display: inline; or display: block;? Depends on what you want.