<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Nginx &#8211; 李辉 / Grey Li</title>
	<atom:link href="https://greyli.com/tag/nginx/feed/" rel="self" type="application/rss+xml" />
	<link>https://greyli.com</link>
	<description>一个编程和写作爱好者的在线记事本</description>
	<lastBuildDate>Sat, 15 Nov 2025 10:55:15 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>

<image>
	<url>https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg</url>
	<title>Nginx &#8211; 李辉 / Grey Li</title>
	<link>https://greyli.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>（使用 HTML、JavaScript、Flask 或 Nginx）为丢失的图片显示默认图片</title>
		<link>https://greyli.com/display-default-image-for-missing-image/</link>
		<comments>https://greyli.com/display-default-image-for-missing-image/#respond</comments>
		<pubDate>Sat, 23 Feb 2019 10:58:46 +0000</pubDate>
		<dc:creator><![CDATA[李辉]]></dc:creator>
				<category><![CDATA[计算机与编程]]></category>
		<category><![CDATA[Flask]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Nginx]]></category>
		<category><![CDATA[图片]]></category>

		<guid isPermaLink="false">http://greyli.com/?p=2307</guid>
		<description><![CDATA[当在 HTML 页面上显示图片时，如果图片不存在，我们通常需要显示一个默认图片。 假设我们的图片路径在 /im [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>
	当在 HTML 页面上显示图片时，如果图片不存在，我们通常需要显示一个默认图片。
</p>
<p>
	假设我们的图片路径在 /imgs 下，默认图片为 /imgs/default.jpg，下面是一些常见的处理方法示例。
</p>
<h2>
	Solution 1: HTML / JavaScript<br />
</h2>
<p>
	最简单的，你可以使用 &lt;img&gt;&nbsp;元素的&nbsp;<code>onerror</code>&nbsp;属性来设置默认图片：
</p>
<pre>
<code>&lt;img src=&quot;/imgs/cat.jpg&quot; onerror=&quot;this.src=&#39;/imgs/default.jpg&#39;&quot;&gt;</code></pre>
<p>
	类似的，你也可以使用 JavaScript（jQuery）监听 img 元素的 error 事件（当图片地址无效时浏览器会触发这个事件）：
</p>
<pre>
<code>$(&#39;img&#39;).on(&quot;error&quot;, function() {
  $(this).attr(&#39;src&#39;, &#39;/imgs/default.jpg&#39;);  // 替换为默认图片
});</code></pre>
<h2>
	Solution 2: Flask<br />
</h2>
<p>
	除此之外，你也可以在服务器端处理，以 Flask 为例，你可以写一个自定义视图函数来加载图片：
</p>
<pre>
<code>import os
from flask import send_from_directory

# ...

@app.route(&#39;/img/&lt;path:filename&gt;&#39;)
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, &#39;/imgs/default.jpg&#39;))
    return send_from_directory(img_path)</code></pre>
<p>
	在模板里，使用这个视图函数获取图片 URL：
</p>
<pre>
<code>&lt;img src=&quot;{{ url_for(&#39;get_image&#39;, filename=</code>&#39;imgs/&#39;&nbsp;+ <code>image.filename) }}&quot; &gt;</code></pre>
<h2>
	Solution 3: Nginx<br />
</h2>
<p>
	在生产环境下，出于性能的考虑，我们通常会使用 Web 服务器（比如 Nginx / Apache）&nbsp;来服务（serve）静态文件。以 Nginx 为例，你可以使用&nbsp;<a href="http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files"><code>try_files</code></a>&nbsp;指令来设置默认图片：
</p>
<pre>
<code>location /imgs/ {
    try_files $uri /imgs/default.jpg;
}</code></pre>
<p>
	附注：本文改写自我的<a href="https://stackoverflow.com/a/54684256/5511849">SO&nbsp;回答</a>。</p>
]]></content:encoded>
			<wfw:commentRss>https://greyli.com/display-default-image-for-missing-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
