我有一个图像,我将动态填充src稍后与javascript,但为了方便,我希望图像标签存在于页面加载,但只是不显示任何东西。我知道<img src= " />是无效的,那么最好的方法是什么?
当前回答
我发现使用:
<img src="file://null">
不会发出请求并正确验证。
浏览器只会阻止对本地文件系统的访问。
但是在Chrome的控制台日志中可能会显示一个错误,例如:
Not allowed to load local resource: file://null/
其他回答
我个人使用about:blank src,通过将img元素的不透明度设置为0来处理破碎的图像图标。
另一种选择是嵌入一个空白图像。任何符合你的目的的图像都可以,但是下面的例子编码了一个只有26字节的GIF——来自http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
根据下面的评论编辑:
当然,您必须考虑您的浏览器支持需求。不支持IE7或更低版本是值得注意的。http://caniuse.com/datauri
我知道这可能不是您正在寻找的解决方案,但它可能有助于提前向用户显示图像的大小。同样,我不完全理解最终目标,但这个网站可能会有所帮助:https://via.placeholder.com
它很容易使用,并允许显示所需大小的空图像。 同样,我理解您不想展示任何东西,但这可能也是一个优雅的解决方案。
<img src="https://via.placeholder.com/300" style='width: 100%;' />
我发现,简单地将src设置为一个空字符串,并在CSS中添加一个规则来隐藏损坏的图像图标就可以了。
[src=''] {
visibility: hidden;
}
如果你保持SRC属性为空,浏览器将发送请求到当前页面的url 如果不想要任何url,总是在SRC属性中添加1*1透明img
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="