网页JS动态生成的Img无法显示，已核查SRC路径，新手寻求排查思路

• 路径规则核对：你代码中写的images/smile.png是相对于当前运行的HTML文件的路径，而非JS文件的路径。如果你的JS是单独外链引入的，不要按照JS文件和images文件夹的相对位置写路径，要以HTML文件的位置为基准计算路径。
• 文件名大小写校验：Windows环境下文件名大小写不敏感，本地测试即使大小写写错也能正常访问，但部署到Linux服务器就会出现404。请确认实际文件的名称、后缀和你写的smile.png完全一致，比如避免出现Smile.png/smile.PNG这类大小写不一致的情况。
• 确认DOM挂载逻辑：你目前贴出的代码仅完成了img元素创建、src属性设置的步骤，没有写appendChild相关逻辑把生成的face元素插入到页面已存在的DOM节点（比如你代码里定义的theLeftSide、theRightSide）中。元素未挂载到DOM树时，浏览器不会发起图片资源请求，也不会渲染该元素。
• 浏览器开发者工具排查：按F12打开开发者工具，切换到「网络」面板，刷新页面后筛选「img」类请求：

  若smile.png请求状态为404：点击请求查看实际请求的完整路径，和你本地文件的实际存放位置对比，就能快速定位路径错误点
  若请求状态为200但不显示：切换到「元素」面板找到生成的img标签，检查是否被CSS规则设置了display: none、visibility: hidden或者宽高为0导致隐藏
  若请求状态为403：检查图片资源所在目录的访问权限配置是否正确

• 根路径适配：如果你的HTML文件存放在子目录下，需要访问站点根目录的images文件夹时，路径可以写成/images/smile.png（开头加斜杠代表从站点根目录开始寻址），避免相对路径层级计算错误。

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