为丢失的图片显示默认图片的几种方法

有些时候，网页中的图片会由于误删或是目录调整致使没法找到，页面上会显示一个丢失图标：

这时，更好的处理方式是显示一个默认图片，好比：

假设咱们的图片路径在 /imgs 下，默认图片为 /imgs/default.jpg，下面是一些常见的处理方法示例。

Solution 1: HTML / JavaScript

最简单的，你能够使用 <img> 元素的 onerror 属性来设置默认图片：

<img src="/imgs/cat.jpg" onerror="this.src='/imgs/default.jpg'">复制代码

相似的，你也能够使用 JavaScript（jQuery）监听 img 元素的 error 事件（当图片地址无效时浏览器会触发这个事件）：

$('img').on("error", function() {
  $(this).attr('src', '/imgs/default.jpg');  // 替换为默认图片
});复制代码

Solution 2: Flask

除此以外，你也能够在服务器端处理，以 Flask 为例，你能够写一个自定义视图函数来加载图片：

import os
from flask import send_from_directory

# ...

@app.route('/img/<path:filename>')
def get_image(filename):
    img_path = os.path.join(the_image_folder_path, filename)  # 获取图片路径

    if not os.path.exists(img_path):  # 判断图片文件是否存在
        return send_from_directory(os.path.join(the_image_folder_path, '/imgs/default.jpg'))
    return send_from_directory(img_path)复制代码

在模板里，使用这个视图函数获取图片 URL：

<img src="{{ url_for('get_image', filename='imgs/' + image.filename) }}" >复制代码

Solution 3: Nginx

在生产环境下，出于性能的考虑，咱们一般会使用 Web 服务器（好比 Nginx / Apache） 来服务（serve）静态文件。以 Nginx 为例，你能够使用 try_files 指令来设置默认图片：

location /imgs/ {
    try_files $uri /imgs/default.jpg;
}复制代码

附注：本文改写自个人 SO 回答。