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

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

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

假设我们的图片路径在 /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 回答。

转载于:https://juejin.im/post/5cbac5e6f265da036b4a6102