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?

ReadyTools · Accepted Answer · 2025-01-31 17:29:39Z

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>

answered Jan 31 at 17:29

ReadyTools

1494 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CubingNerd · Accepted Answer · 2025-01-31 17:37:06Z

0

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

answered Jan 31 at 17:37

CubingNerd

567 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related