簡單實用的原生img替換方案：xy-img

原生img的痛點

最近，xy-ui新增了一類組件xy-img，主要目的是爲了代替原生img標籤，解決了原生img在使用時一般會用一些問題

• 加載失敗的默認顯示
• 沒法直接設置圖片比例
• 沒法懶加載（最新chrome可能支持，不完善）
• 沒法點擊查看大圖

下面來看實際使用：

建議查看原文，能夠實時交互

使用方式

使用方式很簡單

npm i xy-ui

或者直接從github拷貝源碼。

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-img.js';
</script>
<!-- 使用 -->
<xy-img src="img.jpg"></xy-img>

連接src

圖片連接。能夠是絕對路徑，也能夠是相對路徑。

<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

當圖片連接加載失敗時，會默認顯示一個佔位符

<xy-img src="https://images.xxx.jpg"></xy-img>

能夠設置background和color來定製佔位符

<style>
.img-placeholder{
    background:#333;
    color:#f1f1f1;
}
</style>
<xy-img src="https://images.xxx.jpg" class="img-placeholder"></xy-img>

默認連接defaultsrc

默認連接。若是不能保證src必定能加載成功（通常是外部連接），能夠設置一個defaultsrc來處理當src加載失敗時的狀況。

<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.pexels.com/photos/697662/pexels-photo-697662.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

當defaultsrc仍加載失敗時（固然這種狀況不多見，並且可控），會默認顯示一個佔位符

<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.xxx.jpg"></xy-img>

描述alt

能夠設置一個描述，加載成功時會顯示在左下方，加載失敗時會顯示在佔位符上。

<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="image-keyboard"></xy-img>
<xy-img src="https://images.xxx.jpg" alt="image-keyboard"></xy-img>

比例ratio

能夠設置一個比例來約束圖片的尺寸（以寬度爲基準）。

格式爲w/h，如16/9。

<xy-img ratio="16/9" src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

自適應fit

設置自適應方式，同原生object-fit，可取值cover（默認）、fill、contain。

<xy-img fit="cover" src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

懶加載lazy

能夠設置lazy讓圖片在可見範圍時才加載，在此以前不會發送網絡請求，提高用戶體驗。

<xy-img lazy src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>

畫廊gallery

能夠設置gallery屬性，獲得一個畫廊效果，此時鼠標hover會出現標識，點擊放大展現原圖大小，支持鍵盤操做。

加載失敗的圖片不會計入。

<xy-img gallery src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>

能夠根據gallery屬性值自動分類成不一樣組別。

<xy-img gallery="A" src="https://images.pexels.com/photos/698808/pexels-photo-698808.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
<xy-img gallery="B" src="https://images.pexels.com/photos/1440387/pexels-photo-1440387.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

小結

上面簡單介紹了xy-img的使用，xy-img是一個原生web組件，不限制於框架，可直接使用。若是想使用其餘相似的組件，可關注xy-ui，聚集了其餘各種常見交互組件，歡迎star~。