Html relative img src

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File Path Examples

Path	Description
	The «picture.jpg» file is located in the same folder as the current page
	The «picture.jpg» file is located in the images folder in the current folder
	The «picture.jpg» file is located in the images folder at the root of the current web
	The «picture.jpg» file is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File paths are used when linking to external files, like:

Absolute File Paths

An absolute file path is the full URL to a file:

Example

The tag is explained in the chapter: HTML Images.

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example

In the following example, the file path points to a file in the images folder located in the current folder:

Example

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example

Best Practice

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

Источник

Fixing img src local file paths

Getting issues with img src not loading local file paths? Check these tips to find how to fix them!

Jan 9, 2023 | Read time 8 minutes

🔔 Table of contents

Introduction

A common annoyance that comes up when doing web design locally is loading up local files. For example in the below code, we are trying to load a file located in our C: temp folder — C:/temp/mylocalfile.jpg

 Now this does not work because, C:/ is not a protocol. The src attribute only accepts protocols. Now we can see that this will work with older Microsoft browsers such as IE9, but will fail with modern browsers like Chrome, Firefox, etc!

To fix img src to load local file paths, we need to use the file protocol

Using the file protocol

If we want the tag to load up a file within our own computer/machine, we need to use the file protocol (referenced here: https://datatracker.ietf.org/doc/html/rfc8089)

The file protocol follows the syntax:

Keep in mind that we do not need to specify the host part. If there is not host part in the file URI, then it just resolves to localhost.

However, even when we do not set the host value, we still need to specify the extra forward slash file:///.

Img src local path on mac or linux systems

Using the file protocol is a bit different on mac (OSX) or linux systems versus on Windows. Consider the following img tag trying to load a photo.png file:

 Notice that we are using the ~ tilde (~User). On mac (OSX) or linux systems, this is a common way to expand our path from the home path. However, the file protocol does not recognize things like the tilde character ( ~ ) so you will need to fill it out manually.

So you would need file:///home/User/photo.png (on most Unixes), and use file:///Users/User/photo.png (on Mac OS X)

There are also other things to check if the img src is not loading aswell.

Follow the below suggestions:

Check 1 — Validate the syntax

The syntax for loading a image from a source is by . Now src only accepts valid URLs with accepted protocols. A protocol is a few letters, then a colon and two slashes.

For example, HTTP:// , and FTP:// are valid.

Going to back to our orignal code that was not loading the images correctly, , the browser does not recognize that URL, since it is thinking to load http://c:/

When using the file protocol, we need to make sure that we have the correct slashes. file:///.. should be generally safe to use. On windows it is more forgiving and allows double slashes.

Additionally, if your filename contains spaces or special characters we need to encode it.

As an example, lets say we want to reference the file C:/temp/my local file.jpg — notice the spaces. We need to encode it — replacing the whitespace to %20 .

Note: Why three slashes in file:/// ?

Using the three slashes file:///C:/etc is just a short hand. It is the same as file://localhost/C:/etc

Check 2 — Verify the file extension

One issue that can trip some people up is that the file names can be case insensitive. This will be based on the serve that is hosting your website.

With most Unix based servers (Linux, or OSX), the files are case sensitive. While on Windows servers, they are case insensitive.

As an example, if you are hosting with Apache on Ubuntu it does care about the casing on your filename or path.

As for under Windows it is correct to assume that aBc.html and abc.html are exactly the same file.

In the example below, lets say we have image called photo.png, the second line will not load the image due to the all caps PNG extension

Check 3 — Using relative paths

One way to get around issues around local file paths not loading with img src is to use relative paths. However, when we chooe to go down this path, we need to make sure that we are using the correct syntax to load relative files.

• / — This means the root directory
• ../ — This means going up on directory
• ./ — This means the current directory (if you are working off the current directory, you may not need this — just use the file name)
• ../../ — This means going up two directories

Lets say we got the following basic folder structure:

Check 4 — Clear cache and check for errors

A common reason why you cant see your PNG src changes is that the browser is caching the image assets.

What I usually do is to open up dev tools (Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux)) and tick the “Disable Cache (while DevTools is open)”

image on how to open DevTools and open its settings. This way we can ensure that our code is using the most up to date image.

Additionally, you can check if your image file (eg PNG or JPG) is loading correctly by inspecting the console in DevTools. Usually if it is not showing, we can see a 404 error:

Tip: Use a development server like Live Server in VS Code!

If you are coding with VS Code, then using the Live Server extension is a must. When you are just coding locally without a local server running, references to images can get a bit confusing.

For example, if you use the root directory / — this could mean your actual C:/ root folder instead of the current folder!

Live server can be downloaded here: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Summary

In this post, I went over some steps you can take to fix issues with loading img src from the local file path. Firstly, we need to make sure that we are using the file protocol ( file:/// ) and that our syntax is correct.

We need to verify that the image path is correct and that we are considering case sensitivity. For windows systems, file paths are case sensitive, while linux or mac OSX are case insensitive.

An alternative to use the file protocol is using relative paths based on your project’s root folder.

Additionally, if the previous steps are not working, we can check to see if the browser is caching the error — in this case we should open up the browser settings (DevTools) to clear the cache!

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

HTML img src (image source) with path options (5 examples)

The img src stands for image source, which is used to specify the source of an image in the HTML tag.

Absolute path example Relative example

For example, this is how the image path is set along with title and alt attributes in img tag:

Two options to specify a source

You may use absolute or relative paths to specify the source of the image in HTML img src attribute.

The absolute path

In this option, the complete URL of the image is specified in the src attribute of HTML img tag. For example:

See online demo and code

You may also specify the URL of the image without “http”.

See online demo and code

This will be useful if the server is changed from HTTP to HTTPs in the future, for example. This will work in both cases.

Where should I use Absolute path in img src?

• You should use this option when using images from some other web server.
• You do not want or permitted to host those images at your own server.
• In that case, the image download bandwidth consumption will cost at the server where it is hosted.

Although, absolute options will also work for the same server, however, recommended way is to use the relative path in case images are existing at the same server where your website is hosted.

The relative path option

In this option, you will specify image source based at the current directory. An example of relative path is:

See online demo and code

If you are working in a source file e.g. index.html and use above line of code, it means:

• The images directory/folder is at the same location where source file (index.html) is placed.
• The images directory contains the banana.jpg file.

See another possibility to specify path:

See online demo and code

In that case, I used “../”, that specifies to go back one step.

To get back two steps, use “../../”. e.g.

See online demo and code

What if the image does not load? The alt attribute

There may be a few reasons that images does not load, for example:

• The specified path in img src tag is not correct.
• There are speed issues at the user’s side and the image is too heavy to be loaded.
• You web server got slower or taking much time to complete the request.
• And more.

In any case, where an image is unable to download at user’s computer the alt attribute text will be shown. The alt means alternate which is specified in the HTML tag. For example:

See online demo and code

So if the path is incorrect or image is not loaded for any reason, the text “Banana is good in taste” will be shown in place of the image, as shown in the demo.

The HTML alt attribute is recommended to use for images generally. This will benefit as far as SEO is concerned. As such, search engines are unable to read the text inside the images so the only way you may tell the purpose of images is by “alt” or “title” tags.

Display title as Bootstrap tooltip

The title tag of the tag (and others) can be used to display the tooltips. By default, tooltips use default style which is small in size and small text.

By using tooltip with CSS, you may style it quite beautifully.

In this demo, I will show you tooltip by using the Bootstrap component. For that, I simply included the Bootstrap libraries and jQuery in the head section.

See online demo and code

The tooltip is called in the section by using jQuery (see script section). The style contains the look and feel of the tooltip.

For more on Bootstrap Tooltips, go to its detailed guide.

Conclusion

Out of the two options to specify the path in img src tag of HTML, you should use relative if images are located at your own hosting.

If you are referring images from other servers then use absolute URLs in the src attribute.

You should also consider using absolute URLs if you are using high-quality images and your hosting package offers limited bandwidth consumption.

There are third party image hosting solutions where you may host images while the bandwidth cost is incurred by that server.

Источник