Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 14.02.2020, 12:56   #1
ivan.tiran
Форумчанин
 
Аватар для ivan.tiran
 
Регистрация: 24.08.2011
Сообщений: 138
По умолчанию Как ссылку на изображение передать в аргументах? (React JS) в styled-components в background-image передать ссылку на изображение.

Добрый день. Мне надо в styled-components в background-image передать ссылку на изображение.

Пока сделал так
Код:
import React from "react";
import styled from "styled-components";

import URL from "../images/stars_88874.png"

export const IconButton = ( { text, imageUrl } ) => {
     return (
        <Wrap>
            { text }
        </Wrap>
    );
};

const Wrap = styled.div`
    box-sizing: border-box;
    background-image: url(${URL});
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: 100%;
    text-align: center;
    font-size: 1.15rem;
    border-radius: 15px;
    font-family: Calibri, sans-serif;

    &:hover{
        border: 3px solid grey;
    }
`;
Но, мне надо, чтобы imageUrl передавался в background-image. Таких компонентов будет несколько. Создавать каждый копипастом не хочется. Спасибо.
ivan.tiran вне форума Ответить с цитированием
Старый 17.02.2020, 22:10   #2
ivan.tiran
Форумчанин
 
Аватар для ivan.tiran
 
Регистрация: 24.08.2011
Сообщений: 138
По умолчанию

Разобрался сам

Код:
export const ImageButton = ({ headerText, imageUrl }) => {
  return (
    <Wrap>
      <TEXT>
        <TEST>
          {headerText}
        </TEST>
      </TEXT>
      <CheckBoxImage>
        <InputWrap>
            <input type="checkbox"/>
        </InputWrap>
        <IMAGE image={imageUrl}>
        </IMAGE>
      </CheckBoxImage>
    </Wrap>
  );
};

const Wrap = styled.div`
  /*border: 1px solid red;*/
  box-sizing: border-box;
  cursor: pointer;
  width: 200px;
  border-radius: 15px;
  &:hover{
    border: 2px solid grey;
  }
`;

const TEXT = styled.div`
  height: 3rem;
  display: table;
  width: 200px;
  text-align: center;
`;

const TEST = styled.div`
  display: table-cell;
  vertical-align: middle;
  text-align: center;
`;

const IMAGE = styled.div`
  background-image: url(${( {image} ) => image});
  background-repeat: no-repeat;
  background-size: 128px;
  height: 128px;
  width: 128px;
  /*border: 2px solid green;*/
`;

const CheckBoxImage = styled.div`
  display: flex;
  justify-content: center;
`;

const InputWrap = styled.div`
  display: flex;
  align-items: flex-end;
`;
Картинки пришлось хранить на сервере и брать их оттуда.
ivan.tiran вне форума Ответить с цитированием
Старый 18.02.2020, 00:07   #3
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 15,312
По умолчанию

ivan.tiran, спасибо за ответ )
Alar вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
в Excel из Ссылки на страницу с фото сделать Прямую ссылку на изображение DanaFox Microsoft Office Excel 0 28.06.2016 10:07
Передать ссылку в chrome nibufep Общие вопросы Delphi 2 13.12.2015 21:43
передать ссылку на процедуру в качестве строки xrob Общие вопросы Delphi 5 24.02.2013 18:14
Как передать изображение на хостинг [Silverlight] Руслантус WPF, UWP, WinRT, XAML 1 05.07.2011 07:20
Как правильно передать через ссылку двумерный динамический массив? amerhant Общие вопросы C/C++ 2 21.04.2010 23:50


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS