html中如何設置默認圖片？

言

大家可能都知道img標簽是怎么設置默認圖片的，但是你知道background-img是如何設置默認圖片的嘛？

html中如何設置默認圖片？

JS監聽

<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認圖片的url地址'"/>

這里是應用了img標簽的onerror事件，當加載失敗就用默認圖片地址。但是這里可能出現如果默認圖片地址也加載不出來，或者失敗，在IE內核的瀏覽器下就會反復加載，出現死循環，最后造成堆棧溢出錯誤。因此，需要用下面兩種方法解決：

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

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

html中如何設置默認圖片？

background-img

background是可以設置多個背景圖片的，最前面的優先級越高，所以如果javan1.jpg沒有就好顯示第二個javan2.jpg，如果還沒有就好顯示第三個javan3.jpg。

第一種：

background: url("javan1.jpg") 0 0 no-repeat,
 url("javan2.jpg") 200px 0 no-repeat,
 url("javan3.jpg") 400px 201px no-repeat;

第二種：

background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: 0 0, 200px 0, 400px 201px;

需要注意的是：IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。

拓展-CSS漸變

background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面這種CSS語法我們經常見到，可能有人看不懂具體的意思，其實上面的些符號含義與正則表達式有很多一致之處：

[] 在正則中表示一個字符類，這里，你可以理解為一個小單元。
| 表示候選。也就是“或者”的意思，要么前面的，要么就后面的。
? 為量詞，表示0個或1個，言外之意就是，你可以不指定方向，直接漸變色走起。
+ 也是量詞，表示1個或者更多個。因此，終止顏色是不可缺少的。例如：linear-gradient(red)是醬油命，白板。
<> 中的是關鍵字，主要是讓開發人員知道這里應該放些什么內容。

水平漸變

{
 background-image: linear-gradient(left, red 100px, yellow 200px);
}

CSS水平漸變

左上角漸變

{
 background-image:linear-gradient(left top, red 100px, yellow 200px);
}

CSS左上角漸變

公告

喜歡小編的點擊關注，了解更多資源！

者開源了一個Web思維導圖，在做導出為圖片的功能時走了挺多彎路，所以通過本文來記錄一下。

思維導圖的節點和連線都是通過 svg渲染的，作為一個純 js 庫，我們不考慮通過后端來實現，所以只能思考如何通過純前端的方式來實現將svg或html轉換為圖片。

使用img標簽結合canvas導出

我們都知道 img 標簽可以顯示 svg，然后 canvas 又可以渲染 img，那么是不是只要將svg渲染到img標簽里，再通過canvas導出為圖片就可以呢，答案是肯定的。

const svgToPng = async (svgStr) => {
    // 轉換成blob數據
    let blob = new Blob([svgStr], {
      type: 'image/svg+xml'
    })
    // 轉換成data:url數據
    let svgUrl = await blobToUrl(blob)
    // 繪制到canvas上
    let imgData = await drawToCanvas(svgUrl)
    // 下載
    downloadFile(imgData, '圖片.png')
}

svgStr是要導出的svg字符串，比如：

然后通過Blob構造函數創建一個類型為image/svg+xml的blob數據，接下來將blob數據轉換成data:URL：

const blobToUrl = (blob) => {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = evt => {
            resolve(evt.target.result)
        }
        reader.onerror = err => {
            reject(err)
        }
        reader.readAsDataURL(blob)
    })
}

其實就是base64格式的字符串。

接下來就可以通過img來加載，并渲染到canvas里進行導出：

const drawToCanvas = (svgUrl) => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      // 跨域圖片需要添加這個屬性，否則畫布被污染了無法導出圖片
      img.setAttribute('crossOrigin', 'anonymous')
      img.onload = async () => {
        try {
          let canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          resolve(canvas.toDataURL())
        } catch (error) {
          reject(error)
        }
      }
      img.onerror = e => {
        reject(e)
      }
      img.src = svgUrl
    })
}

canvas.toDataURL()方法返回的也是一個base64格式的data:URL字符串：

最后就可以通過a標簽來下載：

const downloadFile = (file, fileName) => {
  let a = document.createElement('a')
  a.href = file
  a.download = fileName
  a.click()
}

實現很簡單，效果也不錯，不過這樣就沒問題了嗎，接下來我們插入兩張圖片試試。

處理存在圖片的情況

第一張圖片是使用base64的data:URL方式插入的，第二張圖片是使用普通url插入的：

導出結果如下：

可以看到，第一張圖片沒有問題，第二張圖片裂開了，可能你覺得同源策略的問題，但實際上換成同源的圖片，同樣也是裂開的，解決方法很簡單，遍歷svg節點樹，將圖片都轉換成data:URL的形式即可：

// 操作svg使用了@svgdotjs/svg.js庫
const transfromImg = (svgNode) => {
    let imageList = svgNode.find('image')
    let task = imageList.map(async item => {
      // 獲取圖片url
      let imgUlr = item.attr('href') || item.attr('xlink:href')
      // 已經是data:URL形式不用轉換
      if (/^data:/.test(imgUlr)) {
        return
      }
      // 轉換并替換圖片url
      let imgData = await drawToCanvas(imgUlr)
      item.attr('href', imgData)
    })
    await Promise.all(task)
    return svgNode.svg()// 返回svg html字符串
}

這里使用了前面的drawToCanvas方法來將圖片轉換成data:URL，這樣導出就正常了：

到這里，將純 svg 轉換為圖片就基本沒啥問題了。

處理存在foreignObject標簽的情況

svg提供了一個foreignObject標簽，可以插入html節點，實際上，筆者就是使用它來實現節點的富文本編輯效果的：

接下來使用前面的方式來導出，結果如下：

明明顯示沒有問題，導出時foreignObject內容卻發生了偏移，這是為啥呢，其實是因為默認樣式的問題，頁面全局清除了margin和padding，以及將box-sizing設置成了border-box：

那么當svg存在于文檔樹中時是沒有問題的，但是導出時使用的是svg字符串，是脫離于文檔的，所以沒有這個樣式覆蓋，那么顯示自然會出現問題，知道了原因，解決方法有兩種，一是遍歷所有嵌入的html節點，手動添加內聯樣式，注意一定要給所有的html節點都添加，只給svg、foreignObject或最外層的html節點添加都是不行的；第二種是直接在foreignObject標簽里添加一個style標簽，通過style標簽來加上樣式，并且只要給其中一個foreignObject標簽添加就可以了，兩種方式看你喜歡哪種，筆者使用的是第二種：

const transformForeignObject = (svgNode) => {
    let foreignObjectList = svgNode.find('foreignObject')
    if (foreignObjectList.length > 0) {
        foreignObjectList[0].add(SVG(`<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        </style>`))
    }
    return svgNode.svg()
}

導出結果如下：

可以看到，一切正常。

關于兼容性的問題，筆者測試了最新的chrome、firefox、opera、safari、360急速瀏覽器，運行都是正常的。

踩坑記錄

前面介紹的是筆者目前采用的方案，看著實現其實非常簡單，但是過程漫長且坎坷，接下來，開始我的表演。

foreignObject標簽內容在firefox瀏覽器上無法顯示

對于svg的操作筆者使用的是svg.js庫，創建富文本節點的核心代碼大致如下：

import { SVG, ForeignObject } from '@svgdotjs/svg.js'

let html = `<div>節點文本</div>`
let foreignObject = new ForeignObject()
foreignObject.add(SVG(html))
g.add(foreignObject)

SVG方法是用來將一段html字符串轉換為dom節點的。

在chrome瀏覽器和opera瀏覽器上渲染非常正常，但是在firefox瀏覽器上foreignObject標簽的內容完全渲染不出來：

檢查元素也看不出有任何問題，并且神奇的是只要在控制臺元素里編輯一下嵌入的html內容，它就可以顯示了，百度搜索了一圈，也沒找到解決方法，然后因為firefox瀏覽器占有率并不高，于是這個問題就擱淺了。

使用img結合canvas導出圖片里foreignObject標簽內容為空

chrome瀏覽器雖然渲染是正常的：

但是使用前面的方式導出時foreignObject標簽內容卻是跟在firefox瀏覽器里顯示一樣是空的：

firefox能忍這個不能忍，于是嘗試使用一些將html轉換為圖片的庫。

使用html2canvas、dom-to-image等庫

使用html2canvas：

import html2canvas from 'html2canvas'

const useHtml2canvas = async (svgNode) => {
    let el = document.createElement('div')
    el.style.position = 'absolute'
    el.style.left = '-9999999px'
    el.appendChild(svgNode)
    document.body.appendChild(el)// html2canvas轉換需要被轉換的節點在文檔中
    let canvas = await html2canvas(el, {
        backgroundColor: null
    })
    mdocument.body.removeChild(el)
    return canvas.toDataURL()
}

html2canvas可以成功導出，但是存在一個問題，就是foreignObject標簽里的文本樣式會丟失：

這應該是html2canvas的一個bug，不過看它這issues數量和提交記錄：

指望html2canvas改是不現實的，于是又嘗試使用dom-to-image：

import domtoimage from 'dom-to-image'

const dataUrl = domtoimage.toPng(el)

發現dom-to-image更不行，導出完全是空白的：

并且它上一次更新時間已經是五六年前，所以沒辦法，只能回頭使用html2canvas。

后來有人建議使用dom-to-image-more，粗略看了一下，它是在dom-to-image庫的基礎上修改的，嘗試了一下，發現確實可以，于是就改為使用這個庫，然后又有人反饋在一些瀏覽器上導出節點內容是空的，包括firefox、360，甚至chrome之前的版本都不行，筆者只能感嘆，太難了，然后又有人建議使用上一個大版本，可以解決在firefox上的導出問題，但是筆者試了一下，在其他一些瀏覽器上依舊存在問題，于是又在考慮要不要換回html2canvas，雖然它存在一定問題，但至少不是完全空的。

解決foreignObject標簽內容在firefox瀏覽器上無法顯示的問題

用的人多了，這個問題又有人提了出來，于是筆者又嘗試看看能不能解決，之前一直認為是firefox瀏覽器的問題，畢竟在chrome和opera上都是正常的，這一次就想會不會是svgjs庫的問題，于是就去搜它的issue，沒想到，還真的搜出來了issue，大意就是因為通過SVG方法轉換的dom節點是在svg的命名空間下，也就是使用document.createElementNS方法創建的，導致部分瀏覽器渲染不出來，歸根結底，這還是不同瀏覽器對于規范的不同實現導致的：

你說chrome很強吧，確實，但是無形中它阻止了問題的暴露。

知道了原因，那么修改也很簡單了，只要將SVG方法第二個參數設為true即可，或者自己來創建節點也可以：

foreignObject.add(document.createElemnt('div'))

果然，在firefox瀏覽器上正常渲染了。

解決img結合canvas導出圖片為空的問題

解決了在firefox瀏覽器上foreignObject標簽為空的問題后，自然會懷疑之前使用img結合canvas導出圖片時foreignObject標簽為空會不會也是因為這個問題，同時了解了一下dom-to-image庫的實現原理，發現它也是通過將dom節點添加到svg的foreignObject標簽中實現將html轉換成圖片的，那么就很搞笑了，我本身要轉換的內容就是一個嵌入了foreignObject標簽的svg，使用dom-to-image轉換，它會再次把傳給它的svg添加到一個foreignObject標簽中，這不是套娃嗎，既然dom-to-image-more能通過foreignObject標簽成功導出，那么不用它必然也可以，到這里基本確信之前不行就是因為命名空間的問題。

果然，在去掉了dom-to-image-more庫后，重新使用之前的方式成功導出了，并且在firefox、chrome、opera、360等瀏覽器中都不存在問題，兼容性反而比dom-to-image-more庫好。

總結

雖然筆者的實現很簡單，但是dom-to-image-more這個庫實際上有一千多行代碼，那么它到底多做了些什么呢，點個關注，我們下一篇文章再見。

題的引出是這樣的，在一個項目中有大量的頁面主體是table做數據展示，所以就封裝了一個table的組件，提供動態渲染的方案。有個問題是數據類型中有圖片，對于圖片的加載失敗我們需要做容錯。一般我們的思路都是對img綁定error事件，替換該圖片為一個默認的圖片。但是error事件是不會冒泡的，我們渲染是動態的，我們不能delegate事件到body上。如果將處理寫在js里，那么每次渲染的時候都要去給圖片綁定error事件，寫在模板里拼接（內聯事件）又會很麻煩（我采取的方案是用戶編寫基本th,td模板，所以需要使用者拼接，思考過走配置的方法初始化table這個問題可以忽略。。。）

博主也是個糾結的人，有沒有更好的解決方案呢？下面介紹一個css黑魔法，用偽元素對圖片加載失敗做處理。

什么是偽元素？科普鏈接：http://www.w3school.com.cn/css/css_pseudo_elements.asp

css知識扎實的人肯定會有個疑問，img是可替換元素（科普：http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html），是不能應用偽元素的啊？！

對，沒錯，是不能用，至于黑魔法嘛~img不能用，但是加載失敗了能不能用呢？

哈哈哈，我們在chrome下測試看下：

有的！！！那我們后面可做的事情就思路了啊，哈哈哈

后面引入我寫的一個demo

正常的圖片：

容錯后的：

至于為什么圖片加載失敗后，會可以使用偽元素，我的理解大概是這樣的。當加載成功的時候img是沒有任何子節點的，befor和after是在元素的內容前后插入內容。但當圖片加載失敗之后，是不是把替代文本作為字內容了呢?后面我會用一個偽元素標簽是試驗？你們猜到是哪個了么？

兼容性：

在ios的Safari和uc上不能實現，so 這個方案還是要考慮下的

╮(╯▽╰)╭，博主也是糾結啊，如果有更好的方案可以和我聯系

額，不對，跑題了，我們今天是介紹這個偽元素的黑魔法的，哈哈哈~

在線咨詢

上一篇：HTML行內元素與塊級元素有哪些及區別？
下一篇：URI,URL,URN詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中如何設置默認圖片？

言

JS監聽

background-img

拓展-CSS漸變

公告

使用img標簽結合canvas導出

處理存在圖片的情況

處理存在foreignObject標簽的情況

踩坑記錄

foreignObject標簽內容在firefox瀏覽器上無法顯示

使用img結合canvas導出圖片里foreignObject標簽內容為空

使用html2canvas、dom-to-image等庫

解決foreignObject標簽內容在firefox瀏覽器上無法顯示的問題

解決img結合canvas導出圖片為空的問題

總結

您的項目需求