el-table组件中img标签src属性为空值时的显示不一致问题
在使用Element UI的el-table组件渲染数据时，如果图片路径（src属性）为空，图片显示效果可能出现差异：有时显示浏览器默认的图片加载失败图标，有时则直接显示为空白区域。本文分析了这种现象出现的原因，并提供了解决方案。
代码示例：
<el-table-column label="机构名称" prop="NAME" width="260">
<template slot-scope="scope">
<div class="logo_name">
<img src="https://img.php.cn/" alt="在el-table中，img的src为空时为何会有不同的显示效果？" />
<div>{{scope.row.NAME}}</div>
</div>
</template>
</el-table-column>
当后台返回的ORIGINALLOGO为空时，img标签的src属性也为空。这种情况下，浏览器行为取决于是否设置了alt属性以及浏览器自身的实现差异：
-
设置了
alt属性但src无效: 浏览器通常会显示一个占位符图标，表示图片加载失败。 -
src和alt属性均未设置:img标签可能直接显示为空白，不显示任何内容。
浏览器版本和具体实现会影响最终显示效果。
解决方法和排查步骤：
-
统一处理空值: 建议在数据处理阶段，将空图片路径替换为一个默认图片路径，例如一个占位符图片。 这能保证在所有情况下都有一个一致的显示效果。
-
添加
alt属性: 为img标签添加alt属性，即使src为空，也能提供替代文本，避免完全空白。修改后的代码示例：
<img :src="scope.row.ORIGINALLOGO || '/path/to/default.jpg'" :alt="scope.row.NAME || '机构logo'" style="max-width:90%">
-
检查CSS样式: 检查是否存在CSS样式影响了
img标签的显示，例如display: none;或其他样式导致图片不可见。 -
浏览器兼容性测试: 在不同浏览器和浏览器版本上测试，确保显示效果一致。
通过以上方法，可以有效避免img标签src为空值时显示效果不一致的问题，提升用户体验。 建议优先采用第一种方法，即在数据层处理空值，保证显示的一致性。
