HTML图片添加问题求助：Web开发新手的图片嵌入难题

一、本地图片加载失败的解决方法 #

• 核对文件路径
  • 同目录下的图片：写法必须是 <img src="my_photo.jpg" alt="我的照片">，注意文件名大小写完全匹配（Windows系统可能不敏感，但Linux/macOS和线上服务器是区分的），别用中文或特殊字符（比如空格、括号），建议改成my_photo.jpg这种格式。
  • 子目录图片：如果图片放在images文件夹里，HTML在根目录，写法是 <img src="images/my_photo.jpg" alt="我的照片">；如果图片在上级文件夹，用../回退，比如 <img src="../images/my_photo.jpg" alt="我的照片">。
• 确认图片真实格式
  别手动改后缀（比如把png改成jpg），右键图片看「属性」，确认后缀和实际格式一致，比如真的是jpg/png/webp格式。
• 强制刷新清缓存
  改完路径后按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新，避免浏览器缓存旧的错误路径。

二、网络图片加载失败的解决方法 #

• 获取谷歌图片的真实URL
  右键谷歌图片→「在新标签页打开图片」，复制新标签页地址栏里的完整链接，这才是图片的直接地址，右键复制的那个是跳转链接，没用。
• 避开跨域限制
  有些网站的图片禁止外部引用，就算拿到真实URL也显示不出来。可以把图片上传到自己的GitHub仓库（复制raw格式的链接），或者用支持外链的图床工具。
• 链接必须完整
  网络图片的src必须包含http://或https://，比如 <img src="https://example.com/my_photo.jpg" alt="我的照片">，漏掉协议会导致加载失败。

快速排查技巧 #

按F12打开浏览器开发者工具，切换到「控制台」面板，看有没有报错：

• 出现404 Not Found：肯定是路径写错了，重新核对文件位置。
• 出现CORS相关错误：图片所在网站禁止外部引用，换个图片源。

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