display: none !important 注入 <img ng-src...>

Posted 2023-03-07

【中文标题】display: none !important 注入 <img ng-src...>

【英文标题】：display: none !important injected in <img ng-src...>

【发布时间】：2014-07-25 17:47:48

【问题描述】：

我正在尝试调试我的 AngularJS 应用程序，其中 display:none 被注入标签，如下所示：

img 标签应该是这样显示的：

  <img ng-src="clientImage" style="margin: 0 0 0 5px;" />

这是我得到的：

  <img ng-src="clientImage" style="margin: 0 0 0 5px; display: none !important;" />

有人可以通过建议我如何追踪 (display: none !important;) 的注入方式来帮助我吗？还有任何想法可能会在我的 img 标签中注入这个？

注意事项： - 这个问题只发生在某些浏览器上，而不是所有浏览器上，实际上我已经尝试在相同的浏览器版本上重现该错误，但在两台不同的机器上但失败了。 - 我正在使用 Chrome 最新版本进行测试

【问题讨论】：

您是否也在使用ng-show 或ng-hide？另外，您使用的是哪个版本的 AngularJS？

@ChrisB 不，页面上没有，这让我更加困惑。我正在使用 Angular 1.2.6

你能发布更多你的代码吗？恐怕这还不足以帮助你。

【参考方案1】：

关闭广告屏蔽。

我有一张名为“Advert.png”的图片，花了太多时间才意识到广告块正在阻止它 ¬¬。

【参考方案2】：

当您在浏览器中使用 adblocker 扩展程序时会出现此问题，当您暂停时您将能够看到图像并且此内联 CSS 将不会显示。

【参考方案3】：

我在从 src 属性加载图像时发生了这种情况， 为一些图像添加了内联样式"style="display: none !important;"。

尝试在 Chrome 中禁用角度检查器插件。 我在正常模式下发生了这种情况，但在隐身模式下，firefox，opera，mobile 一切正常。

【参考方案4】：

我也遇到过类似的情况。这是因为我在 Chrome 上安装了广告拦截器。我的应用程序在没有安装广告拦截器的 Firefox 上运行良好。但是chrome没有显示元素。

经过几个小时的谷歌搜索后，我发现 chrome 未显示的元素的 id 是问题所在。我对特定元素的 ID 是“广告后”。我将其更改为“make-new”。

就是这样。它开始工作:)

我认为广告拦截器会找到某些 html 页面的 ID 和名称来决定是否显示它。

希望这对某人有所帮助

【参考方案5】：

首先，检查 DevTools 是否显示了哪个 CSS 规则隐藏了它。 它应该给你文件和行。如果不是，请尝试禁用 javascript 以查看是否有帮助。或者手动扫描文件并寻找.hide()、.toggle()等（如果使用jQuery）。

要进一步调试，您可以尝试在子树和属性修改上设置断点，方法是选择元素并在上下文菜单中选择“Break on...”（如下所示）。 p>

您也可以试试Visual Event。另见：How to find event listeners on a DOM node?