图片资源路径需全面检查HTML、CSS、JS及构建工具中的硬编码引用，确保文件名、格式、大小写、路径层级一致，并清除缓存验证生效。
确认图片资源路径是否被硬编码在 HTML 或 CSS 中
很多 HTML5 模板会把产品图直接写死在 
background-image 中。先全局搜索 product、item、pic、img/ 等关键词，定位所有引用位置。
- 检查
index.html和其他页面中所有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，除非你同步改了所有引用和 - Windows 下注意大小写不敏感，但部署到 Linux 服务器后
Product1.jpg≠product1.jpg
检查是否有 JavaScript 动态生成图片路径
部分响应式模板用 JS 控制多屏适配图源，例如通过 data-srcset 或拼接 URL。这类逻辑不改代码只换文件是无效的。
高端旅游旅行景点类模板(带手机版)1.4.2
下载
高端旅游旅行景点类模板(带手机版)自带内核安装即用，模板自带移动端，图片文本均已可视化方便替换，伪静态生成，并支持多种内容木块可按需添加。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板）2、带移动端3、前端banner轮播图文本均已进行可视化配置4、伪静态页面生成5、支持内容模型、多语言、自定义表单、筛选、多条件搜
- 搜索
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是否更新 - 临时在
require('./assets/...')）。漏掉任意一层，都会出现“图换了但没完全换”。 
