HTML怎样插入图片

插入图片可以使用img标签来实现。

1、新建html文件，如图所示，在body标签中插入img标签，需要注意的是，img在html中没有结束标签，所以不需要添加“</img>”。给标签添加“src”属性，属性值填写想要添加图片的路径，这里以和html同一目录下的1.png为例，这样图片就插入完成了：

2、为了防止用户浏览网页时无法加载图片，可以给img标签添加“alt”属性，这个属性可以在图片加载失败时显示出来以告诉用户这里是张什么图片，还可以在用户将鼠标放在图片上是显示提示信息，这里以属性值“鹦鹉”为例：

3、img标签中插入的图片宽和高默认是图片自身的宽和高，如果想要自定义宽和高的话，可以用“width”和“height”来控制，这里以宽和高都是200为例，为width”和“height”设置属性值为“200”：

这一类的H5是通过图片合成技术实现相关 *** 作，有的H5工具中也包含了这一插件，比如说人人秀，就可以通过图片合成制作类似的H5作品。

图片生成类H5如何制作？

步骤一：创建空白活动

如果之前注册过账号的，可以直接点击登录按钮，如果没有账号可以花费几分钟的时间注册一个账号，账号注册非常方便。然后点击个人中心——创建活动。

步骤二：添加图片合成插件

点击互动—趣味，选择图片合成。

步骤三：完善图片设置

点击右侧“图片合成设置”，打开设置d窗主界面，默认进入内容设置页。

步骤四：作品完成发布

所有的插件都设置完成后，点击左上角的预览或发布，就能显示插件效果了。

图片设置相关注意事项：

1、添加元素里名称输入背景图，类型选择简单元素即可，根据需要勾选是否可移动和缩放、是否允许添加一次（建议背景图勾上），再添加一个图标，点击保存即可。

2、分组创建好后，右侧的图片上传区就可以开始上传丰富的背景图元素了，人人秀提供了图片库和背景库供挑选，也可以自主上传图片。

3、背景图分组和图片添加好了，下一步可以添加各种背景图里面的图片元素了，具体 *** 作和添加背景图一样，继续点击添加按钮，新增一个元素分组，然后上传元素图片。

4、补充说明一下这是类型里的“组合元素”设置，选择这个设置后，会出现二级分类设置的d窗，这样就可以在这个元素图片里，出现更多分类的元素图片供给用户组合使用了。

5、封面设置是为了让商家有地方展示自己植入的固定主题或者营销内容，在内容设置点击“贴图封面”，可以进入封面设置页。

6、封面设置顶部有很多设置按钮，选择“封面”可以上传封面图片，一般建议上传的图片主要区域是透明的，防止把用户 *** 作区域盖住，同时需要注意图片大小根据建议来设置。还可以根据需要在封面图片上插入文字、二维码、微信头像、昵称等信息。

在开发中有时候会用到H5调用本地图片或者相机，像第三方的实名认证，在线客服等等都需要上传图片。H5中只需要通过 <input>调用即可，ios是可以的实现的，不需要自己处理，除非客户端压缩图片，但是Android中需要自己处理，比较坑，本文记录H5调用本地图片或者相机的实现过程以及遇到的问题。

H5主要是通过 input 标签来获取图片

通过 WebView 加载 h5 页面，监听 WebView 对应的方法，实现自己的逻辑。

当点击 input 标签的时候会调用 WebChromeClient 的 onShowFileChooser() 方法（5.0+）或者 openFileChooser() 方法（3.0+）在改方法中处理自己逻辑，这里是d出一个原生的选择框，选择从相册还是拍照获取图片。

拍照和打开相册功能封装到了 PhotoUtils 工具类中了。

file_paths.xml

从相册中选择

onActivityResult() 方法处理

这里使用 Luban 压缩以后再上传的

---