Bootstrap js 正在为我的图像添加隐藏样式显示 none

Question

我正在使用 Bootstrap v5，它似乎阻止了我的图片加载。我在我网站的其他部分使用的图像加载没有问题。

下面我写在html<img border="0" src="example.com/img/kitties-long.png" id="placedTop">

当我通过开发者工具查看我的网页时。上面写着：<img border="0" src=example.com/img/kitties-long.png" id="placedTop" hidden="" style="display: none !important;">

基本上 hidden="" style="display: none !important;" 违背了我的意愿。

我进入 bootstrap css 文件并找到 [hidden]{display:none !important}。

我有：

从这篇文章中删除了 !important，我的图像仍然隐藏
从这篇文章中删除了 !important 并将 display: block !important 添加到我的 css 文件中，但图像仍然隐藏
从 bootstrap css 文件中删除了 [hidden] 元素，然后我网页的其他部分无法正常运行
看到有一些方法可以用 jQuery 来攻击它，但我不明白如何在我的 HTML 页面上实际编写整个脚本代码。

我看到 $("tag or #id or .className here").show() 应该可以工作，但我不明白需要输入什么或在哪里输入才能工作。我见过在我的 head 部分用标签写的，或者写在 .js 文件里的。

这是我的信息出现的全部html：

<div class="ap-horz aboveCentral">
  <div class="ap-container" id="tAp">
    <img border="0" src="example.com/img/kitties-long.png" id="placedTop">
  </div>
</div>

我已经编写了一个 .js 文件来尝试查找并阻止代码加载，但这似乎也不起作用。 unhide.js 文件是：

function unhideFunction() {
var hidingVar = document.getElementById("placedTop");
if (window.getComputedStyle(hidingVar).style.display === "none") {
    document.getElementById("placedTop").style.display = "block !important";
    document.getElementById("placedBot").style.display = "block !important";
}
}

我已经更改了 html 底部的 javascript 文件的顺序，将 unhide.js 放在 bootstrap.js 的顶部，并尝试了它们其他方式。

我是 javascript 的新手，jQuery 经验很少。我理解 html 和 css 非常好，但不明白为什么只有这个图像被隐藏而不是其他图像。

Answer 1

在您的 div 标签中添加 内联样式 并导入，它将覆盖 bootstrap 样式。

<img border="0" src="example.com/img/kitties-long.png" id="placedTop" style="display: none !important;">

Answer 2

问题是我在 Chrome 上的防病毒扩展。我不得不将网站列入白名单。我希望这对其他人有帮助。

Answer 3

这可能是由 AdBlocker 引起的（至少在 Opera 浏览器中）。对我来说，它阻止显示来自 //ws-na.amazon-adsystem.com/widgets/q?.... 的亚马逊产品图片（通过添加相同的 style="display: none !important; ") 如果我关闭 AdBlocker 扩展程序，就会显示图像

Bootstrap js 正在为我的图像添加隐藏样式显示 none

Bootstrap js is adding hidden style display none to my images

javascript

jquery

css

hidden

bootstrap-5