如何在HTML的div元素内插入图片并实现正常显示

问题排查方向 #

• 路径不匹配：当前代码使用相对路径hologram.jpg，需保证图片文件和HTML文件处于同一文件夹，文件名拼写完全一致（大小写敏感，尤其在非Windows系统运行时）
• 背景图语法错误：你注释的背景图实现写法错误，不能把图片地址写在class属性里，必须通过CSS的background-image属性声明
• 其他可排查点：图片文件是否损坏、浏览器是否存在缓存（可按Ctrl+F5强制刷新），按F12打开开发者工具的Network面板筛选Img选项，可直接看到图片加载的具体报错信息

正确实现代码 #

方式1：使用img标签（默认推荐） #

确认路径正确的前提下，现有img标签代码可直接生效，示例：

<!-- 确认hologram.jpg与HTML文件同目录即可正常显示 -->
<img src="hologram.jpg" alt="Holograms" width="500" height="500">

方式2：使用div背景图实现 #

<div style="height:200px; width: 200px; background-image: url('hologram.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center;"></div>

补充说明：background-size: cover可保证图片按比例填满容器，background-position: center保证图片居中展示，background-repeat: no-repeat禁止小图平铺。

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