关于HTML中, 设置图片时, 一个需要注意的问题

在HTML中, 我们有两种在页面上展示图片的方式:

• 使用<img>标签, 通过给src设置图片源地址来显示图片
  
• 使用元素的background-image的CSS属性, 给url设置图片源地址进行显示
  

然而, 这两种设置方式有一个区别, 在平时开发过程中, 如果不注意这个区别, 就有可能导致产品到了线上时出现问题。
---- 区别 ----

• img标签的图片源地址可以带有空格, img标签在请求图片时会自动将图片源地址进行URL编码
  
• 通过background-image的形式设置背景图片, CSS并不会自动将图片源地址进行编码, 因此如果你设置的url的图片源地址带有空格, 就会出现图片无法正常显示的问题
  

---- 解决办法 -----

• 删除源文件的空格(废话...)
  
• 使用JS的encodeURI函数, 对图片源地址进行编码(推荐)。
  

以上这两点是我们平时在网页开发中, 设置图片展示时需要注意的问题。

-- 开发日记

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

继续阅读请点击广告