Добавление фонового изображения в компонент карты из реквизита - PullRequest
Новая
       4

Добавление фонового изображения в компонент карты из реквизита

0 голосов
/ 06 мая 2020

Я попытался вставить фоновое изображение в компонент карты из props, ошибки не было, но изображение не отображалось и в компоненте карты. Я действительно не могу сказать, что делаю не так. Пожалуйста, мне нужна лучшая идея / способ go для решения этой проблемы. Спасибо

проект. js

import React from "react";
import { Card, CardTitle, CardText, CardActions, Button } from "react-mdl";

const Project = ({ image, technology, description, projectName }) => {
  return (
    <div>
      <Card
        shadow={0}
        style={{ width: "320px", height: "320px", margin: "auto" }}
      >
        <CardTitle
          expand
          style={{
            color: "#fff",
            background: `url(${image})`,
          }}
        >
          {technology}
        </CardTitle>
        <h6>{projectName}</h6>
        <CardText>{description}</CardText>
        <CardActions border>
          <Button colored>View Updates</Button>
        </CardActions>
      </Card>
    </div>
  );
};

export default Project;

проектов. js

import React from "react";
import { projectList } from "./projectList";
import Project from "./project";

const Projects = () => {
  return (
    <div>
      {projectList.map((user, i) => {
        return (
          <Project
            key={i}
            id={projectList[i].id}
            technology={projectList[i].technology}
            projectName={projectList[i].projectName}
            description={projectList[i].description}
            image={projectList[i].image}
          />
        );
      })}
    </div>
  );
};

export default Projects;

Изображение импортируется в projectList. js массив объектов

список проектов js

import MIT from "../img/mit.png";

export const projectList = [
  {
    id: 1,
    technology: "HTML | CSS | Bootstrap",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 2,
    technology: "Reactjs",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 3,
    technology: "React Native",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 4,
    technology: "Vue",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 5,
    technology: "Angular",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },

];

Ответы [ 2 ]

0 голосов
/ 06 июня 2020

Ошибка из projectList. js, ключ изображения в объектах массива.

Должно было быть так 

import MIT from "../img/mit.png";

export const projectList = [
  {
    id: 1,
    technology: "HTML | CSS | Bootstrap",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: `${MIT}`,
  }
]
0 голосов
/ 06 мая 2020

В примере показано задание фона Card следующим образом: 

<Card shadow={0} style={{width: '320px', height: '320px', margin: 'auto'}}>
    <CardTitle expand style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
    <CardText>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.
    </CardText>
    <CardActions border>
        <Button colored>View Updates</Button>
    </CardActions>
</Card>

Попробуйте использовать встроенный CSS, чтобы установить height и width или свойство фона, например cover. Возможно, изображение есть, но оно не имеет высоты или ширины и не отображается.

Кроме того, пробовали ли вы просто поместить изображение в тег img, чтобы проверить, работает ли оно в вашем компоненте ? Скорее всего, изображение импортировано неправильно или оно не отображается, потому что ему не хватает высоты и ширины.

Попробуйте что-то вроде этого: 

background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
...