拿到一套 HTML 模板后，替换成自己的图片是最常见的改动。但很多新手改完发现图片不显示，问题通常出在路径、文件名或图片类型上。下面按实际操作顺序讲一遍。
一、先找到图片的引用位置
替换图片的前提是知道模板在哪里引用了图片。常见有两类：
1. HTML 中的 img 标签
打开模板文件，搜索 <img，看 src 属性指向哪里。例如：
这里的 images/banner.jpg 就是需要替换的目标。
2. CSS 中的背景图
背景图不在 HTML 里，而在 CSS 文件中。搜索 background 或 background-image，会看到：
.hero {
background-image: url(‘../images/hero.jpg’);
}
注意 url() 里的路径是相对于该 CSS 文件的，不是相对于 HTML 文件。
二、替换图片的两种方式
方式一：覆盖原文件（最省事）
把你的新图片命名成和原图完全一致的名字，扩展名也要一样，然后放到原图所在目录，直接覆盖。这样不用改任何代码，路径自然生效。
缺点是如果原图是 .jpg，你的新图是 .png，就不能直接覆盖，需要改代码或转换格式。
方式二：改引用路径（更灵活）
把新图片放进模板目录，然后把 src 或 url() 改成新路径。例如：
这种方式可以保留原图做备份，也方便以后换图。
三、路径写对是关键
路径错误是图片不显示的第一原因。分清三种写法：
images/a.jpg：相对路径，从当前 HTML 文件所在目录找起/images/a.jpg：根路径，从网站根目录找起https://...：绝对地址，直接指向外链
如果模板放在子目录里，用相对路径更容易出错，建议统一用根路径或绝对地址测试。
四、响应式图片要一起改
很多模板用 srcset 提供多尺寸图片：
<img src="small.jpg"
srcset=”small.jpg 480w, large.jpg 1200w”
sizes=”(max-width: 600px) 480px, 1200px”>
只改 src 不够，srcset 里的每个文件都要替换，否则大屏下仍显示旧图。
五、改完不生效怎么办
按顺序排查：
- 文件名大小写是否一致，服务器区分大小写
- 扩展名是否匹配，
.jpg和.jpeg不是一回事 - 浏览器缓存，强制刷新或开无痕窗口
- 打开开发者工具的 Network 面板，看图片请求是否 404
- CSS 背景图检查路径是否相对于 CSS 文件
六、替换前的小建议
先备份原模板，再动图片。批量替换时保持命名规范，比如 banner-01.jpg、banner-02.jpg，后续维护会轻松很多。图片体积也顺手压缩一下，避免拖慢页面加载。
