三种方法，五种情况—解决HTML引用图片失效问题

前言[Ado小白出品]

个人初学网站制作时产生了无法导入图片的情况，遂总结如下解决方案：

方法1：

• 引用绝对路径：
  例如：
  index.html的路径：
  C:\Windos\Users\Desktop\Web\INDEX\index.html
  picture.bmp的路径
  C:\Windos\Users\Desktop\Web\INDEX\picture.jpg
  则引用代码应为：
  <img scr="C:\Windos\Users\Desktop\Web\INDEX\picture.jpg">

方法2：

• jpg改为bmp格式。bmp格式默认RGB模式显示

方法3：

• html图片引用绝对路径失败时，采用相对路径

• 原因：相对路径的使用更加频繁

• 情况1：HTML文件与图片文件在同一级。则直接采用./图片位置
  例如：
  index.html的路径：
  C:\Windos\Users\Desktop\Web\INDEX\index.html
  picture.bmp的路径
  C:\Windos\Users\Desktop\Web\INDEX\picture.jpg
  则引用代码应为：
  <img scr="./picture.bmp">

• 情况2：HTML文件与图片文件在同一级。则采用./文件夹/图片位置
  例如：
  index.html的路径：
  C:\Windos\Users\Desktop\Web\INDEX\index.html
  picture.bmp的路径
  C:\Windos\Users\Desktop\Web\INDEX\pictures\forme\picture.jpg
  则引用代码应为：
  <img scr="./pictures/forme/picture.bmp">

• 情况3：HTML文件与图片文件平行。则采用…/文件夹/图片位置
  例如：
  index.html的路径：
  C:\Windos\Users\Desktop\Web\INDEX\index.html
  picture.bmp的路径
  C:\Windos\Users\Desktop\Web\PICTURE\picture.jpg
  则引用代码应为：
  <img scr="../PICTURE/picture.bmp".>
  注意：无论是需要返回多少级，都只需要两个.（点）
  例如：
  index.html的路径：
  C:\Windos\Users\Desktop\Web\INDEX\index.html
  picture.bmp的路径
  C:\Windos\Users\Desktop\Web\PIC\PICTURE\picture.jpg
  则引用代码应为：
  <img scr="../PIC/PICTURE/picture.bmp">