Передайте реквизиты URL-адреса изображения, но также используйте objectFit

Question

React newb ie здесь,
Я хочу передать URL-адрес изображения в качестве реквизита для фонового изображения, но также хочу применить css к изображению для «заливки». Я получил, как перейти на встроенный css

 style={{ backgroundImage: "url(" + props.imgURL + ")" }}

Я не знаю, как применить css для этого. Я хочу применить objectFit: fill
возможно
style={{ backgroundImage: "url(" + props.img + ")" objectFit="fill"}}
lol

(ИЛИ ЕСТЬ СПОСОБ ПЕРЕДАТЬ ОПОРЫ В ТАБЛИЦУ СТИЛЯ.)
{HELP}

Answer 1

Поскольку вы имеете дело с объектом, вам необходимо разделять пары ключ-значение запятой. Другая проблема заключается в том, что object-fit не работает, если вы используете свойство стиля backgroundImage для установки изображения вместо использования src. Поэтому я рекомендую вместо этого использовать backgroundSize: 'contain'.

<img
  style={{
    backgroundImage: `url(${imgUrl})`,
    backgroundSize: 'contain',
  }}
  width="400"
  height="400"
/>

Изображение должно иметь ширину и высоту. Измените мой пример, чтобы он соответствовал вашим потребностям.

Answer 2

Попробуйте этот бутон

style={{backgroundImage: `url(${props.imgURL})`}}

Я бы попытался по возможности уклониться от встроенного стиля, единственный раз, когда я когда-либо использовал бы его, это для фоновых изображений, просто нацелите элемент в CSS на добавьте свойство object-fit:)

Также для справки в будущем, это литерал шаблона. Вы можете найти более подробную информацию по MDN здесь