CODEWITHSUNDEEP
htmlimagegoogle-chrome
GrizzledAlky
GrizzledAlky

Reputation: 25

HTML on Google Chrome doesn't show my image

When trying to view an index.html file in the browser, it doesn't show any images. I get a broken image icon.

I inspected page and got the following error:

Failed to load resource: net:: ERR_FILE_NOT_FOUND

The image is in an image folder (i.e. images) located in the main folder (i.e. test-site)

I tried on multiple browsers: Firefox, Chrome, Internet Explorer..

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

<body>
  <img src="\test-site\images\japanese.png" alt="My test image">
</body>

</html>

I'm trying to show this image. However, a broken image icon shows but no image...

error: Failed to load resource: net:: ERR_FILE_NOT_FOUND

Upvotes: 2

Views: 6508

Answers (4)

SM Imtiaz Hussain
SM Imtiaz Hussain

Reputation: 447

if your image and index.html are on the same folder then

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>

    <body>
      <img src="./images/japanese.png" alt="My test image">
      <!-- or  ->
      <img src="images/japanese.png" alt="My test image">
 
    </body>

    </html>

Upvotes: 0

Atul Warade
Atul Warade

Reputation: 1

If the index.html file is inside the test-site folder (main folder), then you do not need to include that in your link as such:

It should work for you

Upvotes: 0

Felix O&#39;Brien
Felix O&#39;Brien

Reputation: 124

If the index.html file is inside the test-site folder (main folder), then you do not need to include that in your link as such:

 <img src ="./images/japanese.png" alt ="My test Image">

Should work for you, as the dot is representative of the folder you are already in.

Upvotes: 1

Tenusha Guruge
Tenusha Guruge

Reputation: 2290

Use relative paths.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

<body>
  <img src="./test-site/images/japanese.png" alt="My test image">
</body>

</html>

Upvotes: 0

Related Questions