#javascript #css #node.js #reactjs #core-ui
Вопрос:
Я хочу вставить в image качестве фона в карточку.Я сохранил image в открытом доступе/img/login.png .Это image не показано..Я использую шаблон администратора coreui react.Это мой код ::
lt;CCard className="text-white bg-primary py-5 d-md-down-none " style={{ width: '44%' , backgroundImage: "url(/login.png)" }}gt; lt;CCardBody className="text-center "gt; lt;divgt; lt;h2gt;Sign uplt;/h2gt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.lt;/pgt; lt;Link to="/register"gt; lt;CButton color="primary" className="mt-3" active tabIndex={-1}gt;Registerlt;/CButtongt; lt;/Linkgt; lt;/divgt; lt;/CCardBodygt; lt;/CCardgt; Комментарии:
1. Ваше
login.pngизображение находится в правильном каталоге?2. Вы сказали, что у вас есть изображение
public/img/login.png. Я думаю, что URL — адрес должен быть/img/login.png3. Я изменил его на /img/login.png, но результат был тот же
Ответ №1:
Вы создали папку assest внутри корневой папки, затем вы можете добавить туда папку с изображениями, указать относительный путь и импортировать его в URL-адрес фонового изображения.
импортируйте изображение
import Yourimage from '../images/background_image.png'; var imgStyle= { backgroundImage: `url(${Yourimage})` }; class ImgComponent extends Component { render() { return ( lt;div style={imgStyle}gt; lt;/divgt; ); } } Комментарии:
1. Я сделал это, но результат был тот же самый.. Спасибо вам за ваше руководство
2. Пытались изменить путь img? Пожалуйста, попробуйте изменить путь (../..) в соответствии с местоположением вашего файла
3. Я добавил элемент img в элемент ccard, чтобы он был разрешен. lt;Имя класса CCard=»текст-белый bg-основной py-5 d-md-вниз-нет» стиль={{ ширина : «44%»}}gt; lt;Имя класса CCard=»текст-белый bg-основной py-5 d-md-вниз-нет» стиль={{ ширина : «44%»}}gt;lt;img src={«./img/login.png»} /gt;