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?

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?

• html
• image

2 Answers 2

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>

The Error is the file path itself starting with a ./ It should be a direct path from the root directory, such as /.. This is because HTML doesn't support such an operator, so your best bet is to from the root or subdirectory. (Or use another language for the back-end, like Python or PHP).

Example File Path: path/to/file.txt Alternatively: /path/to/file.txt