html中的img标签你不知道的那些细节！_img tag-程序员宅基地

技术标签： img onerror img标签的src html img标签的alt

案例1， img标签的src可以去请求后台的资源，比如，可以去请求后台的Servlet

img标签的src可以去请求后台的Servlet，如下图：

其他案例，img标签的onerror事件

源代码如下：

imgTag.html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img标签知识点</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>img标签知识点</h1>
<h2>设置img标签加载失败时的默认图片,有2种方式：</h2>
<p>方式1.οnerrοr="οnerrοr=null;src='默认图片的url地址'"</p>
<p>方式2.在οnerrοr事件中调用函数，比如onerror="nofind(this);"</p>

<img alt="利用img标签的src属性去请求某个URL" src="http://127.0.0.1:8888/ajax/form?city=jiangxi-yudu" />
<br /><br />

<img src="" height="40px" width="400px" alt="加载失败时,图像的替代文本" title="鼠标移上去显示的提示文字" />
<br /><br />

<p>
src不写，或者等于空字符串( ="" )， 在img有宽高的情况下，会出现 一个小方框，或者是一张破碎的图片，表示加载失败。
</p>
<img height="40px" width="400px" />
<br /><br />

<img src="" height="40px" width="400px" />
<br /><br />

<p>src的图片路径能正确找到时，不会执行nofind()函数，即不会触发onerror事件</p>
<img id="img66" src="../img/11.jpg" height="260px" width="400px" onerror="nofind(this);" />
<br /><br />

<p>设置img标签加载失败时的默认图片(src=""时，会显示默认图片)</p>
<img src="" height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
<br /><br />
<p>设置img标签加载失败时的默认图片(src不写时，不会显示默认图片)</p>
<img height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
<br /><br />
<p>设置img标签加载失败时的默认图片(src的图片地址找不到时，会显示默认图片)</p>
<img id="img72" src="aaa.jpg" height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
<br /><br />


<p>src等于空字符串(即src="")时，会执行nofind()函数，即会触发onerror事件</p>
<img id="img77" src="" height="240px" width="400px" onerror="nofind(this);" />
<br /><br />

<p>src的图片地址找不到时，会执行nofind()函数，即会触发onerror事件</p>
<p>(我为了做测试，故意写成src="bbb.jpg"，因为项目中根本就没有bbb.jpg这张图片,即找不到bbb.jpg这张图片)</p>
<img id="img88" src="bbb.jpg" height="240px" width="400px" onerror="nofind(this);" />
<br /><br />

<p>src不写时，不会执行nofind()函数，即不会触发onerror事件</p>
<img id="img99" height="40px" width="400px" onerror="nofind(this);" />
<br /><br />

</body>
<script type="text/javascript">
//参考网页https://www.cnblogs.com/MrZhujl/p/13045041.html
	function nofind(obj){
// 		alert(obj.id);
		console.log(obj.id);
		console.log('***' + obj.src);
/*
如果替换图片也加载失败了，则又会触发onerror事件，即又
会执行nofind()函数，这样就会变成没完没了的死循环(即循环调用)，为了防止死循环这种情况的发生，所以，在此做个if判断
*/
		if(obj.src == 'http://127.0.0.1:8888/ajax/img/panda2.jpg'){
			obj.onerror = null; //把onerror设置为null
			console.log('###' + obj.src);
		}
		obj.src = 'http://127.0.0.1:8888/ajax/img/panda2.jpg';
		console.log('===' + obj.src);
	}
	
</script>
</html>

Servlet源代码

package com.jiongmeng.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 测试表单的get和post提交方式有什么不同
 */
@WebServlet("/form")
public class Form extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public static final String AJAX_POST_ENCODE = "UTF-8";

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		request.setCharacterEncoding(AJAX_POST_ENCODE);
		PrintWriter pw = response.getWriter();
		String city = request.getParameter("city");
		String userName = request.getParameter("userName");
		String age = request.getParameter("age");
		String homeTown = request.getParameter("homeTown");
		String salary = request.getParameter("salary");
		String submitButton = request.getParameter("submitButton");
		System.out.println("city=" + city);
		System.out.println("userName=" + userName);
		System.out.println("age=" + age);
		System.out.println("homeTown=" + homeTown);
		System.out.println("salary=" + salary);
		System.out.println("submitButton=" + submitButton);
		pw.print("city="+city+";userName="+userName + ";age="+age+";homeTown="+homeTown+";salary="+salary+";submitButton="+submitButton+";");
		pw.flush();
		pw.close();
	}

	@Override
	public void init(ServletConfig config) throws ServletException {

	}

}

本文链接：https://blog.csdn.net/czh500/article/details/107837886

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Sublime text 3搭建Python开发环境及常用插件安装_sublime python 环境搭建-程序员宅基地

文章浏览阅读4.9k次。Sublime text 3搭建Python开发环境及常用插件安装_sublime python 环境搭建

在CentOS 7上安装MySQL 8.0_centos7安装mysql8.0gpg密钥-程序员宅基地

文章浏览阅读643次。MySQL在首次安装后会执行一个安全脚本，用于设置root用户的密码以及其他安全选项。_centos7安装mysql8.0gpg密钥

echarts绘制圆角方形进度图_echarts symbolboundingdata-程序员宅基地

文章浏览阅读864次。这种场景下，可以使用两个系列，一个系列是完整的图形，当做『背景』来表达总数值，另一个系列是使用 `symbolClip` 进行剪裁过的图形，表达当前数值。_echarts symbolboundingdata

学python需要什么样的电脑,python需要什么样的电脑_python机器学习需要怎样配置的电脑-程序员宅基地

文章浏览阅读1k次，点赞18次，收藏16次。这篇文章主要介绍了学python对电脑配置要求高吗，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。_python机器学习需要怎样配置的电脑

python 建筑建模_设计课开题 | Parameterized Complexities参数化建筑设计-程序员宅基地

文章浏览阅读317次。【竞赛+作品集，点燃你的设计理想】设计课开题啦！百川柯纳陆续推出以国际设计竞赛项目为参考的设计题目让大家参与，借此丰富履历，充实作品集。本期的设计题目为：Parameterized Complexities参数化建筑设计。喜欢参数化的小伙伴，你们兴奋吗？Parameterized Complexities 选题背景近期不断有小伙伴在后台给我们留言，或者咨询百川柯纳顾问老师表达希望能够参加以“参数..._python 建筑平面图

随便推点

[ATF]-TEE/REE系统切换时ATF的寄存器的保存和恢复_atf-tee-程序员宅基地

文章浏览阅读1k次。ATF点滴1、设置运行时栈SP2、寄存器的保存和恢复的实现3、寄存器的保存和恢复的使用场景1、设置运行时栈SPbl31_entrypoint—>el3_entrypoint_common---->plat_set_my_stack—>platform_set_stack—>platform_get_stack动态找到该cpufunc platform_set_stackmov x9, x30 // lrbl platform_get_stackmov sp, x0r_atf-tee

PPT模板下载-程序员宅基地

文章浏览阅读134次。300多个各种类型的PPT模板下载，为您提供各种类型PPT模板、PPT图片、PPT素材、海报模板、新媒体配图等内容下载。

基于JAVA的智能小区物业管理系统【数据库设计、源码、开题报告】_智能化哪些系统需要数据库-程序员宅基地

文章浏览阅读546次。主要功能有：保安保洁管理、报修管理、房产信息管理、公告管理、管理员信息管理、业主信息管理、登录管理。_智能化哪些系统需要数据库

年度书单盘点 | 实用到爆炸，这份高性价比套系书单，越读越上头！-程序员宅基地

文章浏览阅读69次。本期年度书单，带大家盘点一下本年度图灵最受欢迎的套装图书，以前买套装书是为了凑单，如今套装书买回去不仅有一次性就能读完的酣畅感还极具收藏价值。一本好书往往要经过时间的验证，而阅读又是一种隐私，每个人的喜好大有不同，但能够集齐每个人的喜爱，这往往就是经典的诞生。今天这份书单里，有自成体系的套系书，还有一些因读者需求而产生的组成套系书。但不管哪种形式，它们都解决了读者在学习某些方面遇到的问题，也给大家...

thch30 steps/make_mfcc.sh详解-程序员宅基地

文章浏览阅读809次。这个脚本的输入参数有三个：1.data/mfcc/train 2.exp/make_mfcc/train 3.mfcc/train1.data/mfcc/train中有数据预处理后的一些文件：phone.txt spk2utt text utt2spk wav.scp word.txt2.exp/make_mfcc/train中应该是要保存程序运行的日志文件的3.mfcc/train中是提取出的特征文件1是输入目录，2，3是输出目录#!/bin/bash# Copyright 2012-2_thch30

smartclient listgrid style (加竖线、横线、背景色)_listgrid添加样式-程序员宅基地

文章浏览阅读2.5k次。如图所示：在jsp中引入： Style.css 代码：.myOtherGridCell { font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; color:black; border-bottom:1px solid #a0a0a0;border-right:1px solid_listgrid添加样式