HTML showing broken image

问题

i have the following html code and when i pull it up in my browsers the image either doesnt show up, or it shows a broken image:

<!DOCTYPE html>
<html>
    <head>
    <title>Lets Play Battleship</title>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>
            Battleship
            <p><img src="battleship-game-board.jpg" width = "120" height = "90"/></p>
        </h1>


        <p><a href="http://www.freeonlinegames.com/game/battleships"> Click Here to Play Battleship</a></p>

    </body>
</html>

回答1:

To make image work either you use:

Absolute path:

<img src="http://www.domain.com/MyImages/battleship-game-board.jpg"/>

Relative path:

<img src="../MyImages/battleship-game-board.jpg"/>

if image exist in same folder the html file exist then you can use:

<img src="battleship-game-board.jpg" width = "120" height = "90"/>

More details here

Note: image must exist in given path in all cases.

回答2:

This is due to the following reason.

1>The battleship-game-board.jpg is not in the same directory of same file.

2>battleship-game-board.jpg do not contain valid permission. If you are using linux then you have to specify 755 permission on battleship-game-board.jpg image.

You could use


    chmod 755 battleship-game-board.jpg

回答3:

<img src="battleship-game-board.jpg" width = "120" height = "90"/>.

What in the src="" should be a path, but not a title of image. It means you should input the path of battleship-game-board.jpg, but not the image name.

来源：https://stackoverflow.com/questions/18712701/html-showing-broken-image

标签

html

image

src