如果使用js在我的网站上没有图像,如何设置手动默认图像？

Question

如果网站上没有特定图像,我想设置手动虚拟图像.另外如何设置是否在服务器上删除该图像或不可用,在这种情况下我还需要使用JS显示默认图像.

Answer 1

这是跨浏览器的、普通的JavaScript并且没有任何难看的onerror=""标记：

var sPathToDefaultImg = 'http://lorempixel.com/150/100/abstract/2/Placeholder/';

var replaceImageWithPlaceholderIfNotAvail = function( domImg ) {

  // sanitize domImg
  if ( !domImg || !domImg.nodeName || domImg.nodeName != 'IMG' ) {
    // get all images from DOM
    aImg = document.getElementsByTagName('IMG');
    i    = aImg.length;
    if ( i ) {
      while ( i-- ) {
        replaceImageWithPlaceholderIfNotAvail( aImg[i] );
      }
    }
    return;
  }

  // here is where the magic happens
  oImg         = new Image();       // create new Image
  oImg.onerror = function() {       // assign onerror
    domImg.src = sPathToDefaultImg; // handler function
  };
  oImg.src     = domImg.src;        // set src of new Image

};

// now you can use the function on "auto pilot"
replaceImageWithPlaceholderIfNotAvail()

// or feed with any domImage you like to evaluate
// replaceImageWithPlaceholderIfNotAvail( domCustomImg )

Available: <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png" alt="notavail1.jpg"><br>

Not Available: <img src="notavail1.jpg" alt="notavail2.jpg"><br>

Available: <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png" alt="notavail1.jpg"><br>

Not Available: <img src="notavail2.jpg" alt="notavail4.jpg">

代码笔：