从 props 向卡片组件添加背景图片

Question

我尝试从 props 中将背景图片插入到卡片组件中，没有出现错误，但图片也没有显示在卡片组件中。我真的不知道我做错了什么。请我需要一个更好的 idea/way 来解决这个问题。谢谢

project.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;

projects.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 对象数组

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 },
  },
  {
    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 },
  },

];

Answer 1

该示例显示设置 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'

Answer 2

错误来自 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}`,
  }
]

从 props 向卡片组件添加背景图片

Adding a background image to a card component from props

javascript

reactjs

react-props