Question

我试图从道具中将背景图像插入卡片组件，没有出现错误，但是该图像也未显示在卡片组件中。我真的不能说我在做什么错。请我需要一个更好的主意/方法来解决此问题。谢谢

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}`,
  }
]

从道具向卡片组件添加背景图像

2 个答案: