时间戳

首页 > 解决方案 > 如果我定义大小，则 gif 周围的恼人边框

javascript - 如果我定义大小，则 gif 周围的恼人边框

问题描述

所以我现在只是在学习基本的javascript，我决定学习如何通过按下按钮来显示图像/gif。我做了整个按钮脚本，当图像出现时，我认为它太大了。我决定为我的 img 标签添加一些高度和宽度属性，现在当我刷新页面时，会在 gif 出现的位置周围出现一个边框。我真的不想要这个，也想了解为什么会发生这种情况。谢谢！

<button onclick="document.getElementById('secretImage').src='wahoo.gif'">Ok</button>

<br>

<img id="secretImage" width="150px" height="150px"/>

我现在意识到你们将无法看到我保存的图像，但我认为这不会影响您对我的问题的理解。如果我对此有误，请告诉我。

标签： javascript

解决方案

欢迎来到 SO，感谢您提供所需的信息。

您遇到的问题是页面加载，图像 URL 未应用，因此浏览器向您显示丢失的照片图标，您已将其设置为 150px 正方形。

有很多解决方案，但由于您是初学者，我将提供最简单的解决方案。

您可以简单地默认隐藏 img 标签，然后使其在点击时可见。

    function show_image(){
       var _img = document.getElementById('secretImage');
       _img.style.display = "block";
       _img.src='https://via.placeholder.com/150';
    }
    <button type="button" onclick="show_image()">Ok</button>
    
    <br>
    
    <img style="display:none;" id="secretImage" width="150" height="150"/>

推荐阅读