图片资源路径需全面检查HTML、CSS、JS及构建工具中的硬编码引用，确保文件名、格式、大小写、路径层级一致，并清除缓存验证生效。
确认图片资源路径是否被硬编码在 HTML 或 CSS 中
很多 HTML5 模板会把产品图直接写死在 <img src="images/product1.jpg" alt="html5网站模板怎么替换产品展示图_html5换产品图步骤【要点】" > 里，也可能藏在 CSS 的 background-image 中。先全局搜索 product、item、pic、img/ 等关键词，定位所有引用位置。
- 检查
index.html和其他页面中所有<img alt="html5网站模板怎么替换产品展示图_html5换产品图步骤【要点】" >标签的src属性 - 打开
style.css（或main.css），查找类似background-image: url("assets/img/product-02.png");的规则 - 注意相对路径层级，比如
../images/和./img/指向不同目录
替换图片文件时必须保持原文件名和格式一致
如果模板 JS 或 CSS 是靠文件名识别轮播顺序、分类或懒加载触发点，改名会导致图片不显示或错位。不是“能看就行”，而是“必须匹配”。
- 新图尺寸建议与原图接近（尤其 banner 图），避免容器溢出或拉伸变形
- 统一用
.jpg或.png，不要混用；product-main.jpg不能换成product-main.webp，除非你同步改了所有引用和<picture></picture>结构 - Windows 下注意大小写不敏感，但部署到 Linux 服务器后
Product1.jpg≠product1.jpg
检查是否有 JavaScript 动态生成图片路径
部分响应式模板用 JS 控制多屏适配图源，例如通过 data-srcset 或拼接 URL。这类逻辑不改代码只换文件是无效的。
- 搜索
src =、srcset、appendChild、innerHTML等关键词，看是否有动态赋值逻辑 - 常见于轮播组件（如 Swiper）、瀑布流（Masonry）或懒加载脚本（lazysizes）
- 若发现类似
let img = document.createElement('img'); img.src = 'images/' + item.id + '.jpg';，需同步更新数据源或映射关系
验证替换后是否触发缓存导致旧图残留
浏览器或 CDN 缓存常让新图“看不见”，尤其当文件名没变时。这不是模板问题，而是部署环节的典型盲区。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新：Ctrl+F5（Windows）或 Cmd+Shift+R（macOS）
- 检查 Network 面板中图片请求的
Status是否为200，响应头Last-Modified是否更新 - 临时在
<img alt="html5网站模板怎么替换产品展示图_html5换产品图步骤【要点】" >后加查询参数绕过缓存：<img src="images/product1.jpg?v=2" alt="html5网站模板怎么替换产品展示图_html5换产品图步骤【要点】" >
require('./assets/...')）。漏掉任意一层，都会出现“图换了但没完全换”。 
