我现在正在建立一个小网站，用户可以上传他们自己的个人资料图片，但很明显一些用户图片将是png和一些jpeg，有人知道无论如何能够同时接受这两个图像作为背景在css中的图像。这是我的HTML：
<div class='avatar' style='background-image: url('users/avatars/$username.jpg')'></div>
在users / avatars /文件夹中，每个用户的个人资料图片都是这样命名的：“username.jpg”或“username.png”。
以下是我的问题示例：http://cl.ly/image/3W311S2v0v0t
第一篇文章加载了用户个人资料图片，因为它是一个jpeg，但是第二个帖子没有加载个人资料图片，因为它是一个png。
提前致谢。
答案 0 :(得分：5)
你可以在CSS中这样做：
background-image: url('users/avatars/$username.jpg'), url('users/avatars/$username.png');
答案 1 :(得分：1)
如果绝对必须保留客户端的所有逻辑，在Javascript中，如果图像无法加载并尝试加载其他版本，则可以捕获错误。
例如：
<div class='avatar'>
<img src="users/avatars/$username.jpg" onerror='this.src="users/avatars/$username.png";' />
</div>
因此，如果找不到JPG并返回错误，则图像将加载PNG版本。
如果您使用的是PHP，则可以检查文件扩展名并提供不同的HTML。以下是阅读文件扩展名的方法：