html方框中能放置图片么,html中的img标签你不知道的那些细节!

本文介绍了如何在HTML中处理img标签加载失败的情况,提供了两种设置默认图片的方法:通过onerror事件直接修改src属性,或者调用函数处理。同时,展示了Servlet的简单使用,用于理解img标签的src可以请求后台资源。
摘要由CSDN通过智能技术生成

设置

1291608892891013120.htm标签加载失败时的默认图片

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

b2d8fc16f49db90e6659f4d623bf0592.png

248716c4dd1cbaa56d9af278f6972f78.pngimg标签的src可以去请求后台的Servlet,如下图:

100bc3868dd7046810ff2185b5b17a95.png

b00a6054ede160f9c0b7fdaf251bfb6c.png

089293765400b05f01599ebc5e560786.png

3062af4732fae9b6d0522c8e93b49105.png

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

eb59002c7213ac8641f2c4f3fc399352.png

810f01059a933be089452c43654caa63.png

89dc5dbd3293eb33e6c5481027f93825.png

ce2e3aa6f554f3257c7ac7d86a53ef46.png

e46be7c3ff02a46178cd66e6e310d0c3.png

9b60bd423a57d64a6b3aa9d5371b6b69.png

f4510e7550a3b303346ce9f9e8cf3dc9.png

974ffc93b4b8e024c272950da6c02936.png

源代码如下:

imgTag.html页面

img标签知识点

img标签知识点

设置img标签加载失败时的默认图片,有2种方式:

方式1.οnerrοr="οnerrοr=null;src='默认图片的url地址'"

方式2.在οnerrοr事件中调用函数,比如οnerrοr="nofind(this);"

form?city=jiangxi-yudu

1291608892891013120.htm

src不写,或者等于空字符串( ="" ), 在img有宽高的情况下,会出现 一个小方框,或者是一张破碎的图片,表示加载失败。

1291608892891013120.htm

1291608892891013120.htm

src的图片路径能正确找到时,不会执行nofind()函数,即不会触发onerror事件

11.jpg

设置img标签加载失败时的默认图片(src=""时,会显示默认图片)

1291608892891013120.htm

设置img标签加载失败时的默认图片(src不写时,不会显示默认图片)

1291608892891013120.htm

设置img标签加载失败时的默认图片(src的图片地址找不到时,会显示默认图片)

aaa.jpg

src等于空字符串(即src="")时,会执行nofind()函数,即会触发onerror事件

1291608892891013120.htm

src的图片地址找不到时,会执行nofind()函数,即会触发onerror事件

(我为了做测试,故意写成src="bbb.jpg",因为项目中根本就没有bbb.jpg这张图片,即找不到bbb.jpg这张图片)

bbb.jpg

src不写时,不会执行nofind()函数,即不会触发onerror事件

1291608892891013120.htm

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 {

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值