让页面中丢失的图片展示为特定图片（使用 HTML、JavaScript、Flask 或 Nginx）
Le Wed 12 February 2025
页面展示图片时，若图片不存在，通常需要展示一个兜底图片。
本文设：
- 图片路径为 /imgs
- 默认图片为 /imgs/default.jpg
现有几种方案，择一而为之即可。
HTML
使用 <img> 元素的 onerror 属性来设置默认图片：
<img src="/imgs/cat.jpg" onerror="this.src='/imgs/default.jpg'">
JavaScript
用 JavaScript 监听 img 元素的 error 事件：
document.querySelectorAll('img').forEach(function(img) {
img.onerror = function() {
this.src = '/imgs/default.jpg';
};
});
JQuery
用 jQuery监听 img 元素的 error 事件：
$('img').on("error", function() {
$(this).attr('src', '/imgs/default.jpg');
});
Flask
以 Flask 为例，写一个自定义视图函数来加载图片：
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：
<img src="{{ url_for('get_image', filename=
'imgs/' +
image.filename) }}" >
Nginx
以 Nginx 为例，使用 try_files 指令来设置默认图片：
location /imgs/ {
try_files $uri /imgs/default.jpg;
}
学习时使用了以下资源：
- https://greyli.com/display-default-image-for-missing-image/