当在 HTML 页面上显示图片时,如果图片不存在,我们通常需要显示一个默认图片。
假设我们的图片路径在 /imgs 下,默认图片为 /imgs/default.jpg,下面是一些常见的处理方法示例。
Solution 1: HTML / JavaScript
最简单的,你可以使用 <img> 元素的 onerror
属性来设置默认图片:
1 |
<img src="/imgs/cat.jpg" onerror="this.src='/imgs/default.jpg'"> |
类似的,你也可以使用 JavaScript(jQuery)监听 img 元素的 error 事件(当图片地址无效时浏览器会触发这个事件):
1 2 3 |
$('img').on("error", function() { $(this).attr('src', '/imgs/default.jpg'); // 替换为默认图片 }); |
Solution 2: Flask
除此之外,你也可以在服务器端处理,以 Flask 为例,你可以写一个自定义视图函数来加载图片:
1 2 3 4 5 6 7 8 9 10 11 12 |
import os from flask import send_from_directory # ... @app.route('/img/<path:filename>') def get_image(filename): img_path = os.path.join(images_path, filename) # 获取图片路径 if not os.path.exists(img_path): # 判断图片文件是否存在 return send_from_directory(os.path.join(images_path, '/imgs/default.jpg')) return send_from_directory(img_path) |
在模板里,使用这个视图函数获取图片 URL:
1 |
<img src="{{ url_for('get_image', filename=</code>'imgs/' + <code>image.filename) }}" > |
Solution 3: Nginx
在生产环境下,出于性能的考虑,我们通常会使用 Web 服务器(比如 Nginx / Apache) 来服务(serve)静态文件。以 Nginx 为例,你可以使用 try_files
指令来设置默认图片:
1 2 3 |
location /imgs/ { try_files $uri /imgs/default.jpg; } |
附注:本文改写自我的SO 回答。