How To Force An Image's Alt Text To Display Instead Of The Image?

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

Solution 1:

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

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);

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

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

Solution 2:

Open developer tool and in javascript console run following jquery command to hide all images.

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

when you press enter all images will have src attribute off null and alt text will display

Solution 3:

One option is a browser add-in: https://chrome.google.com/webstore/detail/image-alt-text-viewer/hinbolcnfifkhlcehoakdledkfjiaeeg?hl=en (This is a chrome example).

Otherwise, try:

content: attr(alt);

It's not the full solution for you, but hopefully it can set you on the right track.