CODEWITHSUNDEEP
htmlgoogle-chromewindows-7-x64
Vinnie D
Vinnie D

Reputation: 19

Image not loading on local site I made

Using Chrome Version 109.0.5414.120 (Official Build) (32-bit) because it is the last version for Windows 7 (I believe).

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE>Vagamond Detective From The Wild West</TITLE>
  <H3>Vagamond Detective From The Wild West</H3>
 </HEAD>
 <BODY>
  <audio src="1-33. Jake Marshall ~ Vagamond Detective From The Wild West.flac", controls=pause, play>
  <img src="Jake Marshall.png", alt="Jake Marshall">
 </BODY>
</HTML>

When I inspect I see no issues. All files are in the same folder, including the HTML file, so there is nothing wrong with the path.

Expected image to load. It didn't.

Upvotes: 0

Views: 69

Answers (3)

Toshka
Toshka

Reputation: 11

I have analyzed your code and have some advice:

  1. Tags are written in lowercase letters.
  2. There should be no <h3> in the section.
  3. Tags must be closed. In this case, </audio>
  4. It will be better if the structure of your project is more organized. The project folder, which contains html, css, and other files, as well as a folder for images and a folder for sounds. then the entry will look like this <img src="image/you_file_name.jpg" />
  5. try to avoid names with spaces. For this use "_" in your case Jake_Marshall.png

A more correct spelling would look like this:

    <!DOCTYPE html>
<html>
    <head>
        <title>Vagamond Detective From The Wild West</title>
    </head>
    <body>
        <h3>Vagamond Detective From The Wild West</h3>
        <audio src="1_33_Jake_Marshall_Vagamond_Detective_From_The_Wild_West.flac", controls=pause, play></audio>
        <img src="Jake_Marshall.png" alt="Jake Marshall" />
    </body>
</html>

Upvotes: 1

Muhammad Aleem Hashmi
Muhammad Aleem Hashmi

Reputation: 309

I noticed a couple of issues in your code.

  1. You have added <h3> inside <head>, which is wrong.
  2. You didn't close <audio> element.
  3. Space in src value.
  4. The attribute controls does not take parameters
  5. Random commas in the tags

You wrote element names in all capital <HTML>, <BODY> etc. Try using all lowercase to reduce mistake chances <html>, <body>. Also rename the files and remove spaces. Try using single name and if it is necessary to use multiple words then use camelCase or underscore '_'.

Here is the updated code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vagamond Detective From The Wild West</title>
</head>
<body>
  <h3>Vagamond Detective From The Wild West</h3>
  <audio src="1_33_Jake_Marshall_Vagamond_Detective_From_The_Wild_West.flac" controls></audio>
  <img src="Jake_Marshall.png" alt="Jake Marshall">
</body>
</html>

Upvotes: 3

Sahil Dhir
Sahil Dhir

Reputation: 4250

After debugging your code I found out your audio tag is not closed. Also the controls attribute was incorrect.

Try this:

<audio src="1-33. Jake Marshall ~ Vagamond Detective From The Wild West.flac" controls></audio>

Upvotes: 1

Related Questions