img图片加载出错处理

为了美观当网页图片不存在时不显示叉叉图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。
其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:

1、让这个图片元素隐藏:

<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2、用默认的图片替换:

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。

因此, 需要用下面两种方法解决:

a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。

b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerror=null"/>

经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持



img图片属性

vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高

  值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit

  初始值: baseline

  应用于: 行内元素、替换元素、表单元格

  继承性: 无

  百分数: 相对于元素的行高line-height

  [注意]IE7-浏览器中vertical-align的百分比值不支持小数行高,且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样,常用的解决办法是将行内元素设置display:inline-block 

复制代码
vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)
复制代码

### LabelImg加载标签问题及解决方案 LabelImg 是一款常用的图像标注工具,支持多种格式的标注输出,例如 Pascal VOC 和 YOLO 格式。在使用过程中,如果需要多次打开工具进行标注,可能会遇到标签顺序混乱的问题,导致生成的 `classes.txt` 文件内容发生变化,从而影响模型训练的一致性。 #### 问题描述 当用户在不同时间对同一组数据进行标注时,LabelImg 默认不会自动加载之前保存的标签文件(如 `predefined_classes.txt` 或 `classes.txt`)。这可能导致以下问题: - 标签顺序发生变化。 - 新增或修改的标签与之前的标注不一致。 - 训练时由于标签序号不匹配,导致模型性能下降或错误。 这些问题的根本原因在于 LabelImg 在每次启动时并不会自动加载预设标签文件,除非用户手动配置[^1]。 #### 解决方案 以下是几种解决 LabelImg 加载标签问题的方法: #### 方法一:创建并导入预设标签文件 LabelImg 支持通过 `predefined_classes.txt` 文件加载预设标签。具体操作如下: 1. 创建一个名为 `predefined_classes.txt` 的文件,将所有可能的标签按顺序列出,每行一个标签。 ```txt hand car tree dog cat ``` 2. 将该文件放置在 LabelImg 的安装目录下的 `data` 文件夹中。例如: ```plaintext D:\anaconda\envs\py38\Lib\site-packages\labelImg\data\predefined_classes.txt ``` 3. 启动 LabelImg 后,工具会自动加载该文件中的标签列表,避免手动输入和顺序混乱的问题[^4]。 #### 方法二:手动指定标签文件路径 如果不想修改默认路径,也可以通过手动指定的方式加载标签文件: 1. 在 LabelImg 工具界面中,点击菜单栏的 `Tools` -> `Open Predefined Classes`。 2. 浏览并选择预先准备好的 `predefined_classes.txt` 文件。 3. 确保每次启动工具时都加载相同的标签文件,以保持一致性。 #### 方法三:备份并恢复 `classes.txt` 如果已经完成部分标注,可以利用生成的 `classes.txt` 文件来确保标签顺序一致: 1. 在第一次标注完成后,复制生成的 `classes.txt` 文件到安全位置。 2. 下次启动 LabelImg 时,将备份的 `classes.txt` 文件重命名为 `predefined_classes.txt` 并放置在 `data` 文件夹中。 3. 这样可以保证后续标注使用的标签顺序与之前一致[^3]。 #### 注意事项 - 如果在标注过程中更改了标签列表(如新增或删除标签),务必重新生成并备份新的 `classes.txt` 文件。 - 使用 YOLO 格式标注时,确保训练代码中定义的类别顺序与 `classes.txt` 文件一致,否则会导致预测结果错误[^2]。 ```python # 示例:检查 classes.txt 文件是否正确 with open("path/to/classes.txt", "r") as f: classes = f.read().splitlines() print(classes) ``` ### 总结 通过上述方法,可以有效解决 LabelImg 加载标签时出现的顺序混乱问题。推荐优先使用 `predefined_classes.txt` 文件的方式,因为它能够简化操作流程并减少出错的可能性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值