• HTML
  • React
  • Knowledge Base
  • HTML
  • React
  • Knowledge Base
  • HTML Tutorial
  • HTML Styles – CSS
  • Link to an Email Address
  • HTML Introduction
  • HTML Editors
  • HTML Basic Examples
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Styles
  • HTML Text Formatting
  • HTML Quotation and Citation Elements
  • HTML Comments
  • HTML Colors
  • HTML RGB and RGBA Colors
  • HTML HEX Colors
  • HTML HSL and HSLA Colors
  • CSS Colors, Fonts and Sizes
  • CSS Padding
  • CSS Border
  • CSS Margin
  • Link to External CSS
  • HTML Style Tags
  • HTML Links
  • HTML Links – The target Attribute
  • Absolute URLs vs. Relative URLs
  • HTML Links – Use an Image as a Link
  • Button as a Link
  • Link Titles
  • Absolute URLs and Relative URLs
  • HTML Link Tags
  • HTML Links – Different Colors
  • Link Buttons
  • HTML Links – Create Bookmarks
  • The alt Attribute
  • HTML Images
  • Image Size – Width and Height
  • Image Width and Height, or Style
  • Images in Another Folder
  • HTML Images on Another Server/Website
  • HTML Animated Images
  • Image as a Link
  • Image Floating
  • Common Image Formats
  • HTML Image Tags
  • The render Method

Images in Another Folder

5 views 0

Written by admin
April 15, 2023

If your image files are stored in a different folder than your HTML file, you can still reference them by using a relative path in the src attribute of the <img> tag.

For example, if your HTML file is located in a folder called html and your image file is located in a folder called images within the same directory as your HTML file, you would reference the image like this:

<img src="images/example.jpg" alt="Example Image">

If the image file is located in a folder above the HTML file, you can use ../ to indicate the parent directory, like this:

<img src="../images/example.jpg" alt="Example Image">

In this example, ../ moves up one directory level from the HTML file to the parent directory, and then looks for the images folder within that directory.

Make sure to use the correct file path for your specific file structure, and also ensure that the image file name and extension are correct.

Was this helpful?

Yes  No
Related Articles
  • The render Method
  • HTML Image Tags
  • Common Image Formats
  • Image Floating
  • Image as a Link
  • HTML Animated Images

Didn't find your answer? Contact Us

Leave A Comment Cancel reply

Previously
Image Width and Height, or Style
Up Next
HTML Images on Another Server/Website
Copyright 2022 k-window. All Rights Reserved