如何强制显示图像的替代文字而不是图像？ [英] How to force an image's alt text to display instead of the image?

问题描述

有一个网站的文本我有兴趣阅读，但伴随它的图片可能包含我不希望看到的内容。我试图使用Firefox扩展程序Stylish来为该网站添加规则。

There is a website whose text I am interested in reading, however the images that accompany it may have content which I'd prefer not to see. I'm trying to use the Firefox extension Stylish to add a rule for that website.

以下CSS规则几乎可以按我的意愿工作：

The following CSS rules work almost as I'd prefer:

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

* {
  background-image: none !important;
}

（注释行是另一种选择;我意识到两个选项）

(The commented line is an alternative; I am aware of the difference between the two options)

同时，我宁愿保留显示图像的替代文字，因为它可以帮助我确定具体图像是否是一个'd喜欢看。

At the same time, I'd prefer to keep the alt-text of images displayed, as it may help me decide whether the specific image is one I'd like to see.

有没有什么办法可以添加CSS规则来隐藏图片，但是显示其alt-text，假设后者已设置？ p>

Is there any way to add a CSS rule that will hide the image but display its alt-text, supposing the latter is set?

推荐答案

很确定这不是你现在可以用CSS做的事情。你需要一个脚本。

Pretty sure this is not something you can currently do with just CSS. You need a userscript.

安装Greasemonkey或Tampermonkey或类似软件。然后这个脚本将工作：

Install Greasemonkey, or Tampermonkey, or similar. Then this userscript will work:

// ==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驱动的网站上处理图片。

It uses waitForKeyElements to handle images on AJAX-driven sites.

这篇关于如何强制显示图像的替代文字而不是图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！