Question 174688 in Html Question posted in
Some basic documentation can be found here.

How can I hide the default border of an image in HTML while still displaying the image itself?

how do I hide the default border of an image.
The image border
code:

<html>
    <style>
        #image{
                width: 60px;
                height: 60px;
        }
    </style>
<body>
     <div><img id="image" alt="art" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/JPEG_example_flower.jpg"></div>
</body>
</html>

I tried to add opacity:0, the border was hidden but the image that was supposed to appear there was also hidden. I only want to hide the border that appears when no image is found.

Tags:

2

Answers


  1. 0

    As said before, inside your style tags add:

    img {
 border:none;
}
    Login or Signup to reply.
  2. 0

    When I looked at the img attached I saw a img not loaded,I’m assuming you want to remove the border? of the img when it can not be fetched.This is an example where the element is removed on a error.I will also add code to replace the img element.

    The first element loades because it has a correct link the second however dose not.

    <html>
    <style>
        #image{
                width: 60px;
                height: 60px;
        }
    </style>
<body>
     <div id="parent">
    <img id="image" alt="art" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/JPEG_example_flower.jpg">
    <img id="image" alt="art" src="https://notworkinglink.jpg"></div>
     <script>
    var img = document.querySelectorAll('#image');
    for(var i = 0;i<img.length;i++){
    img[i].addEventListener('error',function(){
    document.getElementById('parent').removeChild(this); 
     });
     }
     </script>
</body>
</html>

    The following would be an example of replacing a img with an error with a warning.You could replace this so that the not loaded icon apears without a border.

        <html>
        <style>
            #image{
                    width: 60px;
                    height: 60px;
            }
        </style>
    <body>
         <div id="parent">
  <img id="image" alt="art" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/JPEG_example_flower.jpg">
  <img id="image" alt="art" src="https://notworkinglink.jpg"></div>
         <script>
    var img = document.querySelectorAll('#image');
   for(var i = 0;i<img.length;i++){
    img[i].addEventListener('error',function(){
       document.getElementById('parent').removeChild(this);
       
      var warning = document.createElement('p');
      warning.textContent = '404';
      document.getElementById('parent').appendChild(warning);
      
    });
    }
         </script>
    </body>
    </html>

    As you can see the img failing to load is replaced by the text 404 you can modify this to insert the "img not found icon".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search