图片显示异常求助：显示为左上角带小图标的白框（附代码）

嘿，这个问题我太熟了！你看到的那个左上角带小图标的白色方框，是浏览器找不到图片资源时的默认占位符，咱们一步步来排查解决：

最常见的问题：图片路径不完整 #

你当前的HTML里<img>标签的src属性只写了DukeGrafitti_TRANS，缺少了图片的文件后缀（比如.png、.jpg、.webp这类），浏览器根本不知道要加载什么类型的文件。

第一步：补全图片文件名 #

先找到你的图片文件，确认它的完整名称（比如是不是DukeGrafitti_TRANS.png），然后修改HTML代码：

<img src="DukeGrafitti_TRANS.png" alt="Duke Graffiti"/>

建议加上alt属性，这样就算图片还是加载失败，用户也能知道这张图是啥内容~

第二步：确认图片文件的位置 #

如果补全后缀后还是不行，就得检查文件路径了：

• 如果图片和你的HTML文件在同一个文件夹里，直接写完整文件名就没问题；
• 如果图片在子文件夹里（比如一个叫images的文件夹），路径要写成：

  <img src="images/DukeGrafitti_TRANS.png" alt="Duke Graffiti"/>
  

• 你可以把src里的路径复制到浏览器地址栏，按下回车，如果能打开图片，说明路径是对的；如果打不开，要么是文件位置错了，要么是图片文件本身损坏了。

额外验证：CSS样式不影响加载 #

你的CSS代码是没问题的，它只控制图片的显示位置和尺寸，不会导致图片加载失败。等图片能正常加载后，样式会自动生效。

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