How to include a picture in HTML from another drive?

Question

I am learning HTML, CSS and javascript in preparation for my school project involving frontend development. Here's the question.

When I was trying to insert a picture in one of my HTML file. The picture is located in drive C: and the HTML file is located in drive E:.I used a <image> tag.

practice.html: E:\Frontend-Notes\Mainpage\practice.html
10-11.jpg: C:\Users\wangz\Pictures\WallPaper\Scenery\10-11.jpg

   <image src = "C:\Users\wangz\Pictures\WallPaper\Scenery\10-11.jpg">

Then I ctrl+click-ed the path which is supposed to be an absolute path, VS code showed an error message below. error message

I don't know how to deal with it.

Answer 1

So, you can solve your problem by two ways-- 1.) Cut and paste your 10-11.jpg file in your project folder, ie, E:\Frontend-Notes\Mainpage

2.) You need to put the address in src as given below -- file:///C:\Users\wangz\Pictures\WallPaper\Scenery\10-11.jpg

Maybe it helps you.

Answer 2

A quick fix is to move the image you want to use to the same directory with your project, or within your project directory create a folder for the images you'll be using. This is not only a good practice but also a more suitable way to keep your project files organised.