《html页面引用nginx图片》
解决方案
当HTML页面需要引用Nginx服务器上的图片时，核心是正确配置Nginx以提供图片资源的访问，并在HTML中使用合适的路径引用。这涉及到Nginx的配置文件设置以及HTML中的标签等元素的合理运用。
Nginx配置图片资源访问
在Nginx服务器上确保图片存放在指定目录，例如/usr/share/nginx/html/images。然后编辑Nginx的配置文件（通常为nginx.conf），添加如下配置：
```nginx
http {
...
server {
listen 80;
server_name localhost;
# 设置图片存放位置为根目录下的images文件夹
location /images/ {
alias /usr/share/nginx/html/images/;
autoindex on; # 可选，是否显示目录列表
}
}
}
```
保存配置文件后，重启Nginx服务使配置生效。
HTML引用图片 - 路径方式
如果Nginx服务器有域名（如www.example.com），在HTML页面中可以直接使用路径引用图片。例如：
```html
</p>
<h2><h2>HTML引用图片 - 相对路径方式</h2></h2>
<p>当HTML文件和图片都在Nginx服务器同一站点下时，可以采用相对路径。假设HTML文件与图片所在的images文件夹同级：
```html
</p>
<title>图片展示</title>
<!-- 使用相对路径 -->
<img src="./images/example.jpg" alt="示例图片">
<p>
其他思路 - 利用CSS背景图片
除了直接在HTML中使用标签引用，还可以通过CSS设置背景图片来引用Nginx上的图片。例如：
```html
.bg{
width: 300px;
height: 200px;
background-image: url('http://www.example.com/images/example.jpg');
background-size: cover;
}
```
以上几种方法都可以实现HTML页面引用Nginx上的图片，根据实际需求选择合适的方式即可。
