针对你遇到的两个问题，我来一步步帮你分析和解决：

一、Localhost环境下图片无法显示（线上正常，此前本地正常） #

这种情况大概率是路径或配置变化导致的，按以下步骤排查：

• 检查图片引用路径：
  确认代码里的图片路径是基于public目录的根路径（比如<img src="/images/avatar.png">），而不是硬编码了线上的完整域名（比如https://your-live-site.com/images/avatar.png）。如果推送的代码里不小心把路径改成了线上地址，本地localhost自然无法加载线上资源。
• 清除浏览器缓存：
  有时候浏览器会缓存旧的资源状态，试试强制刷新页面（Ctrl+Shift+R或Cmd+Shift+R），或者打开无痕模式访问，看是否恢复正常。
• 确认本地public目录结构：
  检查本地的public文件夹里，图片是否还存在、路径拼写是否和代码里一致（注意大小写！比如代码里写/Images/bg.jpg但本地是/images/bg.jpg，部分开发环境会严格区分大小写）。
• 检查开发服务器配置：
  如果用了Vite、Webpack这类构建工具，看看配置文件里的公共路径设置（比如Vite的base、Webpack的publicPath）。如果推送的代码里把开发环境的公共路径改成了线上的地址（比如base: 'https://your-live-site.com/'），本地开发时会从线上拉取资源，自然显示失败。开发环境下这个值应该设为'/'。

二、移动端/触摸模拟下页面可滚动至内容外 #

这个问题通常和视口设置、元素溢出或触摸事件冲突有关，排查步骤：

• 检查viewport meta标签：
  确保HTML头部正确设置了视口标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  没有这个标签的话，移动端浏览器会用桌面端的视口宽度，导致页面可以横向滚动。如果需要禁止用户缩放，可以加上user-scalable=no。
• 查找超出视口的元素：
  打开浏览器开发者工具，切换到Elements面板，逐个检查页面元素的宽度。重点找那些设置了固定宽度（比如width: 1200px）但没有适配移动端的元素，或者带有margin-left/right、padding-left/right导致总宽度超过100vw的元素。可以用工具里的“选择元素”功能，hover在元素上看它的边界是否超出了视口范围。
• 检查body/html的overflow设置：
  在CSS里添加：

  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  

  有时候body默认的margin或超出的内容会导致横向滚动，触摸滑动时更容易触发这个问题，而鼠标滚动可能不会。
• 排查自定义触摸事件：
  如果你用了JavaScript监听touchstart、touchmove这类事件，检查是否有阻止默认行为（e.preventDefault()）的逻辑处理不当。比如错误地阻止了页面的滚动默认行为，反而导致异常滚动；或者第三方UI库的触摸事件和你的代码冲突。

内容的提问来源于stack exchange，提问作者KN1368