假设我们的图片路径在 /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(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) }}" >

Solution 3: Nginx

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

location /imgs/ {
    try_files $uri /imgs/default.jpg;
}

附注：本文改写自我的SO 回答。

Demo：https://greyli.github.io/pomodoro
源码：https://github.com/greyli/pomodoro

优化交互、美化样式

在这个计算器里，用到了一些处理技巧，可以让它看起来更真实和漂亮。

计算器边缘阴影

这里使用box-shadow的inset方法，也就是把阴影内嵌到元素里，让计算器看起来是有厚度的：

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e;

参考内容：https://css-tricks.com/snippets/css/css-box-shadow/

按钮按下效果

其实是设置按钮的box-shadow，按下时把box-shadow设为none，同时按钮向下移动

button {
  box-shadow: 1px 2px #666;
}

button:active {
  box-shadow: none;
  transform: translateY(4px);
}

按钮上的字不可选择

双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性

.un-selectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

去掉按钮被选中后的蓝色边线

button:focus {outline:0;}  /* 设为none效果相同，或加上 !important */

GitHub项目地址： https://github.com/greyli/typing.js

DEMO

打字机效果很适合用在个人页面和主页的头部，下面是几个示例。

• 翻相册（页脚）
• https://productmap.co/
• http://www.stephanemartinw.com/

用法

首先把CSS和JS文件放到相应的目录下，然后在HTML文件里分别引入这两个文件：

CSS

<link href="typing.css" rel="stylesheet">

JS

<script src="typing.js"></script>

在需要放置的地方插入下面这行

<span id="words"></span><span id="cursor">|</span>

cursor是文字后面闪烁的光标，你可以更换它。

最后在末尾设置你要定义的字段和相关的设置。首先你需要定义一个数组，然后写入单个或多个字段。

<script>
  var strings = new Array("一段文字"); // 单个字段
</script>

<script>
  var strings = new Array("文段1", "文段2"); // 多个字段
</script>

可选的设置有打字速度和删除速度，是否循环（默认为循环）等。

<script>
  var strings = new Array("文段1", "文段2") ; // multi words
  var typingSpeed = 100; // 打出每个字的间隔时间
  var deleteSpeed = 40; // 删除每个字的间隔时间
  var isLoop = true; // 是否循环，true/false
  var waitTime = 800; // 打完一个字段后的等待时间
</script>

最后

如果你在使用这个JS库，那么请让我知道，我会把你加入DEMO里。