当在 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 回答。