在 el-table 中，img 的 src 屬性為空時，為什么會出現不同的表現？

el-table組件中img標簽src屬性為空值導致的渲染差異

使用el-table組件渲染表格時，img標簽的src屬性值為空時，可能會出現不同的渲染結果，例如圖片加載失敗圖標或空白區域。本文將分析此現象的原因及解決方法。

問題描述

如下代碼所示，el-table表格中的圖片src屬性由后端提供：

<el-table-column label="機構名稱" prop="NAME" width="260">   <template slot-scope="scope">     <div class="logo_name">       @@##@@       <div>{{scope.row.NAME}}</div>     </div>   </template> </el-table-column>

當ORIGINALLOGO為空時，部分瀏覽器顯示圖片加載失敗圖標，部分瀏覽器顯示空白。

原因分析

根據html規范，img標簽src屬性為空時，瀏覽器行為可能因瀏覽器類型和版本而異。通常情況下：

• 若設置了src或alt屬性，但src無效，瀏覽器可能顯示空白或加載失敗圖標。
• 若src和alt均未設置，瀏覽器通常顯示空白。

實際應用中，瀏覽器行為與規范存在差異，這可能是由于瀏覽器渲染引擎的差異或版本差異導致的。

解決方法及建議

為了避免渲染差異，建議采取以下措施：

1. 前端統一處理空值: 在前端代碼中，對src屬性為空的情況進行統一處理，例如設置默認圖片或提示信息：

@@##@@

2. 跨瀏覽器測試: 在不同瀏覽器和版本中進行測試，確保渲染結果一致性。

3. 遵循規范，兼顧實際: 雖然應盡量遵循HTML規范，但需考慮不同瀏覽器的實際表現，并采取相應的處理策略。

通過以上方法，可以有效解決el-table中img標簽src屬性為空值導致的渲染差異問題，提升用戶體驗。