Добавление изображения в модальный ReactJS

Я пытаюсь вставить и оформить изображение в своем модальном окне, но у меня возникают проблемы с этим. Я попытался обернуть изображение под div и применить свойства к этому div, но, похоже, он тоже не работает. Я создал ссылку на свою песочницу: https://codesandbox.io/s/react-modal-rx1dz?file=/src/App.js

Благодарю вас!


person lanceljr    schedule 25.06.2021    source источник


Ответы (1)


Вместо использования простой строки вам нужно сослаться на изображение, используя require

<img src={require('./modal.jpg')} />

Вы также можете использовать import

import img from "./modal.jpg"; 
<img src={img} />

Я также немного изменил стиль, чтобы он поместился внутри div.

https://codesandbox.io/s/react-modal-forked-mpkzm

person Apostolos    schedule 25.06.2021
comment
О, изображение выглядит хорошо на моей стороне, но мне было интересно, как правильно его стилизовать. Потому что какой бы css я ни применял, похоже, никакого эффекта не будет - person lanceljr; 25.06.2021
comment
хорошо, потому что в песочнице изображение вообще не появлялось. так что вы не вписываетесь в диалог. подходить по ширине и высоте? - person Apostolos; 25.06.2021
comment
да, я пытаюсь разделить модальное окно на левое и правое. где левая сторона будет отображать изображение, но все свойства css, которые я применил, похоже, не работают. Это работает только тогда, когда я вручную проверяю элемент и применяю его. - person lanceljr; 25.06.2021
comment
Вместо того, чтобы применять стиль непосредственно в App.js, можно ли это сделать на странице scss? - person lanceljr; 25.06.2021
comment
ок позвольте мне проверить. теперь я понимаю, чего ты хочешь добиться - person Apostolos; 25.06.2021
comment
Да, потому что изображение завернуто в Modal, и я не могу найти модальное имя класса по умолчанию. - person lanceljr; 25.06.2021
comment
проверьте ссылку еще раз - person Apostolos; 25.06.2021
comment
А, хорошо, я уже знаю, как это сделать. Благодарю вас! Вы случайно не знаете, как оформить значок «x» в качестве кнопки закрытия? - person lanceljr; 25.06.2021
comment
проверьте значки здесь. w3schools.com/charsets/ref_utf_dingbats.asp. если мой ответ решил вашу проблему, не забудьте принять его. спасибо! - person Apostolos; 25.06.2021