前段时间自学前端写个人静态主页，死死卡在html怎么导入图片这个基础操作上，照着网上零散的代码敲，页面刷新无数次，永远都是裂开的图片图标，完全找不到问题出在哪，基础操作翻车真的太磨人了。
最开始无脑复制了通用img标签代码，直接填了图片的文件名，当时想着文件就在桌面，肯定能读取到，结果页面一片空白，只有个小小的裂图占位符。那时候根本不懂路径的区别，以为只要文件名输对就万事大吉，完全忽略了网页文件和图片文件的存放位置是关键。
当时手头的html文件是单独放在桌面新建的前端项目文件夹里，而要用的配图原图直接丢在桌面空白处，没有归类到项目文件夹中，就是这个不起眼的细节，让我反复刷新页面几十次都没用。盲目修改文件名、重启浏览器、清空浏览器缓存，能想到的笨办法全都试了一遍，浏览器控制台一直跳出资源加载失败的提示，可完全看不懂专业报错内容，只能干着急，越改越烦躁，觉得这种入门级的操作都搞不定，属实有点挫败。
折腾好久才搞明白，html导入图片根本不是代码写法有多难，九成的问题都出在文件路径不匹配上。
老老实实做了规整，在存放html文件的项目文件夹里，新建了一个名为img的子文件夹，把所有需要用到的图片素材，全部剪切粘贴到这个文件夹里，统一存放素材是最省心的新手操作，不用来回核对杂乱的路径。
之后只写最基础的核心代码，一行
就够了，没有加任何多余的修饰参数，保存文件之后刷新浏览器，卡顿了一下之后，图片稳稳的显示在了页面上，瞬间松了口气。其实这行代码本身没有任何门槛，新手出错基本都是路径混乱、文件乱放导致的。
还踩过一个很隐蔽的坑。
最开始的图片文件名带中文、空格还有特殊符号，就算路径改对了，偶尔还是会出现加载失败的情况，时好时坏特别不稳定。后来全部改成纯英文小写命名，删掉所有多余符号，图片加载就再也没出过问题，这是很多教程不会特意提醒的小细节。
慢慢摸清楚，新手做这个操作就两个固定要点，一是保证图片文件夹和html文件处于同一级目录，路径写法最简单不容易出错；二是src里面的内容必须精准对应文件夹名称、图片全名以及图片后缀，jpg、png、webp这些格式后缀绝对不能写错，哪怕少一个字母、大小写不匹配，图片都会直接加载失效。不用去学复杂的绝对路径写法，新手入门只用相对路径就足够适配所有静态页面场景，简单还不容易出错。
那天调试完所有图片之后，关掉浏览器，第一件事就是把电脑里所有前端素材全部规整分类，每个项目都单独建素材文件夹，再也不随意堆放文件了。