如何强制显示图像的替代文本而不是图像？

Question

有一个网站的文字我很想阅读，但是伴随它的图像可能包含我不想看到的内容。我正在尝试使用 Firefox 扩展 Stylish 为该网站添加规则。

以下 CSS 规则几乎符合我的意愿：

img {
  display: none !important;
  /* visibility: hidden !important; */
}

* {
  background-image: none !important;
}

（注释行是备选；我知道这两个选项之间的区别）

同时，我更愿意保留显示图片的替代文字，因为它可以帮助我确定特定图片是否是我想看的。

有没有办法添加 CSS 规则来隐藏图像但显示其替代文本，假设后者已设置？

Answer 1

一个选项是浏览器加载项：https://chrome.google.com/webstore/detail/image-alt-text-viewer/hinbolcnfifkhlcehoakdledkfjiaeeg?hl=en（这是一个 chrome 示例）。

否则，尝试：

content: attr(alt);

这不是适合您的完整解决方案，但希望它能让您走上正轨。

Answer 2

打开开发者工具并在 javascript 控制台中运行按照 jquery 命令隐藏所有图像。

$('img').attr('src','');

当您按 Enter 键时，所有图像的 src 属性都将关闭 null 并且替代文本将显示

Answer 3

很确定这不是您目前仅用 CSS 就可以完成的事情。您需要一个用户脚本。

安装 Greasemonkey、Tampermonkey 或类似软件。然后这个用户脚本将起作用：

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
" );

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var oldSrc  = jNode.attr ("src");
    jNode.attr ("src", "");
    jNode.attr ("data-oldSrc", oldSrc);
}

它使用 waitForKeyElements 处理 AJAX 驱动的网站上的图像。

如何强制显示图像的替代文本而不是图像？

How to force an image's alt text to display instead of the image?

html

css

alt

stylish

userstyles