How to find my images in my folders using the picture element in HTML?

Question

I have a main folder called "AltSchool", inside that i have two subfolders namely "altschool_html_assignments" and "altschool_css_assignments". In the altshool_html_assignments folder, i have two subfolders namely "Assignment_1" and "Assignment_2". In Assignment_2 folder, i have a subfolder called "Assets", inside that is another subfolder called "images" where i kept images which i'd like to use in my html code which is also in the same folder (Assignment_2) as a standalone file.

In my HTML code, i'm trying to use the picture element in order to display the images located in that "images" subfolder with srcset but it doesn't display when the html file is viewed in the browser. How can i be able to locate it so that it be displayed.

My picture element code is below:

<picture>
          <source
            media="(max-width: 570px)"
            srcset="../AltSchools_HTML_Assignments/Assignment_2/assets/images/me_1.jpg"
          />
          <source
            media="(max-width: 800px)"
            srcset="../AltSchools_HTML_Assignments/Assignment_2/assets/images/me_2.jpg"
          />
          <img
            src="./assets/images/me_new.jpg"
            alt="Andre's Picture"
          />
        </picture>

The "img src" displays the image save for that which uses "srcset". Please how do i fix this?

Answer 1

The issue is caused by incorrect paths in your srcset attributes.

Try this:

<picture>
  <source media="(max-width: 570px)" srcset="assets/images/me_1.jpg" />
  <source media="(max-width: 800px)" srcset="assets/images/me_2.jpg" />
  <img src="assets/images/me_new.jpg" alt="Andre's Picture" />
</picture>