how to use img tag in html code example

Example 1: img html

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Example 2: images in html

<html>
  <head>
  </head>
	<body>
  <img src="exampel.end">
    </img>
  </body>
  
  
  </html>

Example 3: how do you code an image in html

<!DOCTYPE html>
<html>
   <head>
      <title>HTML img Tag</title>
   </head>

   <body>
      <img src="/html/images/test.png" alt="Simply Easy Learning" width="200"
         height="80">
   </body>
</html>

Example 4: img tag

<img src="the source image's url" alt="the image's description">

Example 5: picture and img tag

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
     sizes="(min-width: 1280px) 600px,
            (min-width: 768px) 500px,
            100vw"
     src="image-800.jpg"
     alt="Munster Dom">

Example 6: img tag

<head>
<title>Image Upload</title>
<style>
  body {
    margin:0px;
  }

  .center {
    display:inline;
    margin: 3px;
  }

  .form-input {
    width:100px;
    padding:3px;
    background:#fff;
    border:2px dashed dodgerblue;
  }
  .form-input input {
    display:none;
  }
  .form-input label {
    display:block;
    width:100px;
    height: auto;
    max-height: 100px;
    background:#333;
    border-radius:10px;
    cursor:pointer;
  }

  .form-input img {
    width:100px;
    height: 100px;
    margin: 2px;
    opacity: .4;
  }

  .imgRemove{
    position: relative;
    bottom: 114px;
    left: 68%;
    background-color: transparent;
    border: none;
    font-size: 30px;
    outline: none;
  }
  .imgRemove::after{
    content: ' \21BA';
    color: #fff;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
  }
  .small{
    color: firebrick;
  } 
  </style>

</head>

<body>

   <div class="image-upload-one">
     <div class="center">
       <div class="form-input">
         <label for="file-ip-1">
           <img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
           <button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
         </label>
         <input type="file"  name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
       </div>
       <small class="small">Use the &#8634; icon to reset the image</small>
     </div>
   </div>
    
  <script>

    function showPreviewOne(event){
      if(event.target.files.length > 0){
        let src = URL.createObjectURL(event.target.files[0]);
        let preview = document.getElementById("file-ip-1-preview");
        preview.src = src;
        preview.style.display = "block";
      } 
    }
    function myImgRemoveFunctionOne() {
      document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
    }

  </script>
   
</body>

Tags:

Go Example

Recent Posts