无论文件类型如何都链接图像答案

【问题标题】：Linking images regardless of file type无论文件类型如何都链接图像
【发布时间】：2014-12-13 22:31:42
【问题描述】：

我现在正在建立一个小网站，用户可以上传他们自己的个人资料图片，但显然有些用户图片将是 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。

提前致谢。

【问题讨论】：

【解决方案1】：

如果您绝对必须将所有逻辑保留在客户端，在 Javascript 中，如果图像无法加载并尝试加载其他版本，您可以捕获错误。

例如：

<div class='avatar'>
 <img src="users/avatars/$username.jpg" onerror='this.src="users/avatars/$username.png";' />
</div>

因此，如果未找到 JPG 并返回错误，则图像将加载 PNG 版本。

如果您使用的是 PHP，您可以检查文件扩展名并提供不同的 HTML。以下是读取文件扩展名的方法：

【讨论】：

【解决方案2】：

你可以像这样在 CSS 中做到这一点：

background-image: url('users/avatars/$username.jpg'), url('users/avatars/$username.png');

【讨论】：