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

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;" 正在违背我的意愿添加。

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

我有：

1. 从这件作品中删除了!important并且我的图像仍然隐藏
2. 从这件作品中删除!important并添加display: block !important到我的 css 文件中，但图像仍然隐藏
3. 从引导程序 css 文件中删除了[hidden]元素，然后我的网页的其他部分无法正常运行
4. 看到有可能用 jQuery 攻击这个的方法，但我不明白如何在我的 HTML 页面上物理编写整个脚本代码。

我见过写$("tag or #id or.className here").show()应该可以工作，但我不明白需要输入什么或在哪里才能工作。 我已经看到在我的 head 部分用标签编写它或将它写在 a.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

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

Answer 2

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

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

Answer 3

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