Как работать с картинкой вида img src="/crops/a7303253abf"?

Question

[HellWalk]

Постараюсь объяснить проблему коротко и понятно.

Необходимо поправить верстку, по-сути, простой div с картинкой внутри. Для того, чтобы сделать что нужно, нужно картинку убрать, и сделать её в виде background-image у div-а. В целом ничего сложного, если бы не одно но:

Картинка вставляется через:

<img src="<?= ImgHelper::cropImg($new['image'], 800, 400) ?>" alt="" />

В html коде выглядит так:
<img src="/crops/a7305823253abf7706a" alt="" />

И отображается нормально. Но если пробую сделать стиль у блока
background: url('/crops/a7305823253abf7706a');

Картинка не отображается.

Вопрос - как быть? Вариант поправить бек-энд и получать прямые ссылки на картинки вида site.ru/images/img.jpg - не подходит, так как картинки берутся с другого сайта (и ImgHelper::cropImg в этом плане помогает избежать тысяч внешних ссылок).

Comments

[iBird Rose]

а ты уверен что именно картинка не отображается? может ты bg задаешь блоку у которого нет высоты к примеру. и ты просто не видишь его bg.

[Евгений]

Почему так не вставить?

<img src="<?= ImgHelper::cropImg($new['image'], 800, 400) ?>" alt="" />

[HellWalk]

Евгений: Так есть сейчас, а нужно, чтобы картинка была фоном у div-а

Уже разобрался.

Answer 1

[Максим Шимко]

Я бы не советовал пихать картинки в style.css, лучше разграничивать дизайн и данные. Лучше пропиши у дива в html такой атрибут:

<div style="background-image:url(<?= ImgHelper::cropImg($new['image'], 800, 400) ?>)">...</div>

Надеюсь код без ошибок, суть понятна.

Comments

[HellWalk]

Хотел написать "пробовал, не работает", но попробовал еще раз, и путь:

background: url('/crops/a7303253abf7706adcf83ca66d2daa53');

Обработался нормально - картинка отображается.

Странно, до этого пробовал тоже самое - не отображалось. Думал, что ему обязательно расширение файла нужно.

Answer 2

[ThunderCat]

И отображается нормально. Но если пробую сделать стиль у блока
background: url('/crops/a7305823253abf7706a');

надеюсь вы понимаете, что css файлы не исполняют код пхп, если вы туда что-либо и пропишете. Данный ключ /crops/a7305823253abf7706a читает временную картинку заданного в параметрах скрипта размера, его создает скрипт, просто прописав его вы не получите результат выполнения скрипта и данный путь будет пустым. Выхода 2, оба не идеальны, но в вашем случае есть необходимость в костылях, я так понимаю используется как фон картинка из большого массива данных (типа аватарок или чего-то подобного).
- Первый вариант - подключать css через методы пхп(инклуд, реквайр или как кусок шаблона), тогда вставленный код будет работать как надо, причем весь цсс так подключать не нужно, только кусок где у вас такие хитропопые бэкграунды используются.
- Второй вариант - как написал Максим Шимко - в нужных местах шаблона заменить на инлайн стили с прописанным бэкграундом скриптом.