Связывание изображений независимо от типа файла

Question

В настоящий момент я создаю небольшой сайт, и пользователи могут загружать их собственное изображение профиля, но, очевидно, некоторые изображения пользователей будут png и некоторые jpeg, кто-нибудь знает, что угодно, чтобы быть в состоянии принять оба, когда используя изображения в качестве фонового изображения в css. Вот мой HTML:

<div class='avatar' style='background-image: url('users/avatars/$username.jpg')'></div> 

Внутри пользователей/аватары/папки каждого пользователя изображение профиля с именем, как так: «username.jpg» или «username.png».

Вот пример моего вопроса: http://cl.ly/image/3W311S2v0v0t

Первое сообщение загружает профиль пользователя изображение, потому что это JPEG, но второе сообщение не загружено изображение профиля, как это PNG.

Заранее спасибо.

Answer 1

Вы можете это сделать в CSS, как это:

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

Answer 2

Если вы абсолютно должны придерживаться логики на стороне клиента, в Javascript вы можете поймать ошибку, если изображение не загружается и пытается загрузить другую версию.

Например:

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

Так что, если JPG не найден и возвращает ошибку, то изображение будет загрузить версию PNG.

Если вы используете PHP, вы можете проверить расширение файла и обслуживать разные HTML. Вот как прочитать расширение файла:

How to get the file extension in PHP?