為了美觀當網頁圖片不存在時不顯示叉叉圖片
當在頁面顯示的時候，萬一圖片被移動了位置或者丟失的話，將會在頁面顯示一個帶X的圖片，很是影響用戶的體驗。即使使用alt屬性給出了”圖片XX”的提示信息，也起不了多大作用。
其實，可以這樣處理：當圖片不存在的時候，會觸發onerror事件，我們可以在該事件中做一下補救的工作，比如：

1、讓這個圖片元素隱藏：

<img src="圖片的url地址" alt="圖片XX" onerror="this.style.display=‘none‘"/>

2、用默認的圖片替換：

<img src="圖片的url地址"
 
 alt="圖片XX" onerror="this.src=‘默認圖片的url地址‘"/>

註意：如果使用不當，在IE內核的瀏覽器下會造成死循環。比如：當【默認圖片的url地址】也加載不成功（比如網速比較慢的時候）或不存在的話，就會反復的加載，最後造成堆棧溢出錯誤。
因此， 需要用下面兩種方法解決：

a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認圖片足夠小，並且存在。
b、控制onerror事件只觸發一次，需要增加這句話：this.onerror=null; 增加後如下：

<img src="圖片的url地址" alt="圖片XX" onerror
 
="this.src=‘默認圖片的url地址‘;this.onerror=null"/>

經測試，上面的方法在IE各個版本及谷歌、火狐瀏覽器中都支持

img圖片屬性
vertical-align用來設置垂直對齊方式，所有垂直對齊的元素都會影響行高
　　值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
　　初始值: baseline
　　應用於: 行內元素、替換元素、表單元格
　　繼承性: 無

vertical-align:baseline(元素的基線與父元素的基線對齊)
vertical-align:sub(降低元素的基線到父元素合適的下標位置)
vertical-align:super(升高元素的基線到父元素合適的上標位置)
vertical-align:bottom(把對齊的子元素的底端與行框底端對齊)
vertical-align:text-bottom(把元素的底端與父元素內容區域的底端對齊)
vertical-align:top(把對齊的子元素的頂端與行框頂端對齊)
vertical-align:text-top(把元素的頂端與父元素內容區域的頂端對齊)
vertical-align:middle(元素的中垂點與父元素的基線加1/2父元素中字母X的高度對齊)
vertical-align:(+-n)px(元素相對於基線上下偏移npx)
vertical-align:x%(相對於元素的line-height值)
vertical-align:inherit(從父元素繼承vertical-align屬性的值)

原文鏈接

img圖片加載出錯處理（轉載）