Adding an image in an html code

I am new to html. I have been trying to insert an image

http://placehold.it/1000x500

in the following html code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Framework Test page</title>
    <link rel="stylesheet" href="css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body>

    <div class="grid">

        <div class="row">
            <div class="col-2">2 Columns</div>
            <div class="col-10">ss</div>
        </div>

        <div class="row">
            <div class="col-3">3 Columns</div>
            <div class="col-9">9 Columns</div>
        </div>

        <div class="row">
            <div class="col-4">4 Columns</div>
            <div class="col-4">4 Columns</div>
            <div class="col-4">4 Columns</div>
        </div>


    </div>
    <div class="image"><img="http://placehold.it/1000x500" alt="Yoo"></div>
</body>
</html>

with the css file

*{
    border: 1px solid red !important;
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.grid{
    margin: 0 auto;
     max-width: 1200px;
    width: 100%;
}
.row{
    width:100%;

    display: flex;
    flex-wrap: wrap;
}
*{
    font-family: 'Lato', sans-serif;
}
.text{
    margin:20px;
}
.col-1{
    width:8.33%;
}
.col-2{
    width:16.66%;
}
.col-3{
    width:25%;
}
.col-4{
    width:33.33%;
}
.col-5{
    width:41.66%;
}
.col-6{
    width:50%;
}
.col-7{
    width:58.33%;
}
.col-8{
    width:66.66%;
}
.col-9{
    width:75%;
}
.col-10{
    width:83.33%;
}
.col-11{
    width:91.66%;
}
.col-12{
    width:100%;
}

But I am not getting the image when I am opening the file in my browser. But the same image is getting displayed for another html code. Please tell the problem and the solution.

Answers


You have an error with

<img="http://placehold.it/1000x500" alt="Yoo">

You have forgottton to add the src= part.

Instead, use:

<img src="http://placehold.it/1000x500" alt="Yoo">

You are missing the src. The correct syntax for an image is:

<img src="http://placehold.it/1000x500" alt="Yoo" />

Change this line

<div class="image"><img="http://placehold.it/1000x500" alt="Yoo"></div>

To

<div class="image"><img src ="http://placehold.it/1000x500" alt="Yoo"></div>

Use This

<div class="image"><img src="http://placehold.it/1000x500" alt="Yoo" border="0" /></div>

<div class="image"><img src="http://placehold.it/1000x500" alt="Yoo"></div>

you can use this code:-

<div class="image"><img src="http://placehold.it/1000x500" alt="Yoo" border="0" /></div>

Replace the image code with this

<div class="image"><img src="http://placehold.it/1000x500" alt="Yoo"></div>

You have an error in your html..

Replace this line:

<div class="image"><img="http://placehold.it/1000x500" alt="Yoo"></div>

With this line

<div class="image"><img src="http://placehold.it/1000x500" alt="Yoo"></div>

Check out the demo here: http://jsfiddle.net/4h5e0ha5/


The Syntax in wrong you should add src(source) attribute to link any image from drive or from web site Just add

    <img src="path" />

and dont forget to close the tag :P


Need Your Help

Print Microsoft Report .rdlc from asp .net

javascript c# asp.net report

I made a asp page that has a Report Viewer show a Microsoft Report ClientReport.rdlc

Error replacing \ with \\

javascript

I want to make a replace the \ in a string for \