HTML 图片上传以及图片加载失败时使用默认图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Gannicus_Zhu/article/details/51083318

有时候我们需要加载用户的头像,当用户没有上传过头像或者加载失败时,就需要加载默认的图片,那么其实很简单,如下

<img src="要加载的图片地址" onerror="this.src='默认图片地址'">

那么如何做一个上传图片的表单呢?也很简单,如下:

<form action="上传控制器或者api的路由" method="post" role="form" onsubmit="提交事件的回调函数" enctype="multipart/form-data">
    <img src="要加载的图片地址" onerror="this.src='默认图片地址'">
    <input type="file" name="image">
    <button type="submit">上传头像</button>
</form>

enctype="multipart/form-data"是在表单中存在图片文件时必须要加的
<input type="file"> 是默认上传文件的表单组件

猜你喜欢

转载自blog.csdn.net/Gannicus_Zhu/article/details/51083318