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

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

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;

---

该示例显示如下设置

卡
背景：

<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>

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

该示例显示如下设置
卡
背景：

<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>

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

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

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

你有这样的例子吗？没有。。。不是真的@go_diego我编辑了它来显示projectList.js，图像url是从那里链接的如果你检查
图像的值，它是你期望的吗？像这样？。。。否。将图像链接作为projectList.js？中对象的键“image”的值？。。。对但它没有显示出来你有这样的例子吗？没有。。。不是真的@go_diego我编辑了它来显示projectList.js，图像url是从那里链接的如果你检查
图像的值，它是你期望的吗？像这样？。。。否。将图像链接作为projectList.js？中对象的键“image”的值？。。。对但是它没有显示，我确实像你建议的那样把图像放在了img标签中，它没有显示图像，所以我猜问题在于它是如何导入的。因此，我想我现在的问题应该是“如何将图像正确导入到projectList.js页面中，在该页面中我导出了一组对象”？我确实按照您的建议将图像放入了img标记中，但它没有显示图像，所以我猜问题在于如何导入图像。所以我想我现在的问题应该是“如何将图像正确地导入到projectList.js页面中，在那里我导出了一系列对象”？