爲丟失的圖片顯示默認圖片的幾種方法

有些時候，網頁中的圖片會由於誤刪或是目錄調整致使沒法找到，頁面上會顯示一個丟失圖標：

這時，更好的處理方式是顯示一個默認圖片，好比：

假設咱們的圖片路徑在 /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 回答。