In el-table, when the src attribute of the img tag is empty, why is the display effect inconsistent?

Analysis of the difference in display effect when the src attribute of the img tag in el-table is empty

When rendering images using the el-table component of the Element UI, if the src attribute of img tag is empty, the display effect may be inconsistent: some browsers display placeholders for failed image loading, while others display blank. This article will explore the reasons for this difference.

Code example:

<el-table-column label="机构名称" prop="NAME" width="260">
  <template slot-scope="scope">
    <div class="logo_name">
      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="In el-table, when the src attribute of the img tag is empty, why is the display effect inconsistent?">
      <div>{{scope.row.NAME}}</div>
    </div>
  </template>
</el-table-column>

When scope.row.ORIGINALLOGO is empty, src attribute of img tag is empty. The way browsers handle this situation is not exactly the same.

HTML standards and actual differences:

According to the HTML standard, when the src attribute is empty or invalid, and alt attribute is not set, the browser usually displays blank. If the alt property is set, the text in the alt property may be displayed, or a default placeholder icon may be displayed (for example, Chrome may display a "breaking" icon).

However, actual situations may vary according to the following factors:

• Browser Differences: Different browsers (Chrome, Firefox, Safari, etc.) may have slight differences in the implementation of HTML standards, resulting in slightly different handling of src being empty.
• Browser version: Different versions of the same browser may also differ.
• Element UI version: Element UI's own version update may also affect the rendering results.
• CSS style: CSS style may affect the display effect when the image fails to load.

To ensure compatibility and consistency, the following measures are recommended:

• Use default image: When ORIGINALLOGO is empty, use a default image as the placeholder.
• Set alt attribute: Even if you use the default image, it is recommended to set the alt attribute to provide semantic information and improve accessibility.
• Conditional rendering: Use v-if or v-show to decide whether to render the img tag based on whether ORIGINALLOGO exists.

Through the above methods, the inconsistent display effect caused by src is empty can be effectively avoided, and the stability of the application and user experience can be improved.

The above is the detailed content of In el-table, when the src attribute of the img tag is empty, why is the display effect inconsistent?. For more information, please follow other related articles on the PHP Chinese website!