html中的img标签你不知道的那些细节！

妖狐艹你老母 2022-11-24 14:13 190阅读 0赞

**[设置<img>标签加载失败时的默认图片][img]**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]** img标签的src可以去请求后台的Servlet，如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![20200806140522718.png][]

![2020080614054884.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 11][]

###  源代码如下： ###

**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>
 方式1.οnerrοr="οnerrοr=null;src='默认图片的url地址'"
 方式2.在οnerrοr事件中调用函数，比如onerror="nofind(this);"
 
 <img alt="利用img标签的src属性去请求某个URL" src="http://127.0.0.1:8888/ajax/form?city=jiangxi-yudu" />
 
 
 <img src="" height="40px" width="400px" alt="加载失败时,图像的替代文本" title="鼠标移上去显示的提示文字" />
 
 
 
 src不写，或者等于空字符串( ="" )， 在img有宽高的情况下，会出现 一个小方框，或者是一张破碎的图片，表示加载失败。
 
 <img height="40px" width="400px" />
 
 
 <img src="" height="40px" width="400px" />
 
 
 src的图片路径能正确找到时，不会执行nofind()函数，即不会触发onerror事件
 <img id="img66" src="../img/11.jpg" height="260px" width="400px" onerror="nofind(this);" />
 
 
 设置img标签加载失败时的默认图片(src=""时，会显示默认图片)
 <img src="" height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
 
 设置img标签加载失败时的默认图片(src不写时，不会显示默认图片)
 <img height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
 
 设置img标签加载失败时的默认图片(src的图片地址找不到时，会显示默认图片)
 <img id="img72" src="aaa.jpg" height="255px" width="400px" onerror="οnerrοr=null;src='../img/panda4.jpg';" />
 
 
 
 src等于空字符串(即src="")时，会执行nofind()函数，即会触发onerror事件
 <img id="img77" src="" height="240px" width="400px" onerror="nofind(this);" />
 
 
 src的图片地址找不到时，会执行nofind()函数，即会触发onerror事件
 (我为了做测试，故意写成src="bbb.jpg"，因为项目中根本就没有bbb.jpg这张图片,即找不到bbb.jpg这张图片)
 <img id="img88" src="bbb.jpg" height="240px" width="400px" onerror="nofind(this);" />
 
 
 src不写时，不会执行nofind()函数，即不会触发onerror事件
 <img id="img99" height="40px" width="400px" onerror="nofind(this);" />
 
 
 </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 {
    
    	}
    
    }

[img]: https://www.cnblogs.com/MrZhujl/p/13045041.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/04fcbcde0d66478ab1238c70da92eb69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/f2a487a0cc434547b2d08f06673db529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/aafaeaf0522a4e3e8c6c90aabf418f1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/286e40a18f484678867428210c451f96.png
[20200806140522718.png]: /images/20221124/1fa30ac7592d40adaad1b3f91d9adac4.png
[2020080614054884.png]: /images/20221124/f71b12407b234394bd0e28e32af5b4c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/bfd45b56277f4158a62e02466780f9af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221124/9a2e597187a14aed99f7527a5fb5b3a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221124/18e788bc2f9d43fea5ce94b49888a060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7]: /images/20221124/1fd0f5ed52f9412286485b6f8b594fa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8]: /images/20221124/ff9247edf2c34e52835027a946246565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9]: /images/20221124/2eab2b40aaa14ea5ba02b4a5416549bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10]: /images/20221124/a89087e7400b4576a1785e493a4d8d5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 11]: /images/20221124/48dcc3d51d924c94bf8b27051ecfd380.png