在HTML中, 我们有两种在页面上展示图片的方式:
- 使用<img>标签, 通过给src设置图片源地址来显示图片
- 使用元素的background-image的CSS属性, 给url设置图片源地址进行显示
然而, 这两种设置方式有一个区别, 在平时开发过程中, 如果不注意这个区别, 就有可能导致产品到了线上时出现问题。
---- 区别 ----
- img标签的图片源地址可以带有空格, img标签在请求图片时会自动将图片源地址进行URL编码
- 通过background-image的形式设置背景图片, CSS并不会自动将图片源地址进行编码, 因此如果你设置的url的图片源地址带有空格, 就会出现图片无法正常显示的问题
---- 解决办法 -----
- 删除源文件的空格(废话...)
- 使用JS的encodeURI函数, 对图片源地址进行编码(推荐)。
以上这两点是我们平时在网页开发中, 设置图片展示时需要注意的问题。
-- 开发日记
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |