React.js如何在函数中插入自定义网址

Question

我有一个功能，我希望它解析卡片图像的URL。

props.url是我要解析卡的本地路径的地方。

function CardSpecs(props){
    return(
    <Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
    <CardTitle style={{color: '#fff', height: '176px', background: props.url}} >{props.title}</CardTitle>
    <CardText>
     {props.description}
    </CardText>
    <CardActions >
      <a href = {props.link} target = "blank"><Button className ="Button" colored>View</Button></a>
      <Button className ="Button"colored>About</Button>      
    </CardActions>   
  </Card>
    )
}

这就是我所说的。

 <CardSpecs description = "Mobiel Beauty Spa" title = "CorpoHeal" link = "http://corpoheal.com/" url =  'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'/> 

上述方法适用于外部网址 我想解析一个本地路径 例如

<CardSpecs description = "Mobiel Beauty Spa" title = "CorpoHeal" link = "http://corpoheal.com/" url =  'url(./assets/corpoheal.png) center / cover'/> 

但是上面的代码没有破坏代码，它只是显示一个空白，

Answer 1

如果您打算使用本地项目/资源库映像，则可以导入并使用它

例如：

import reactImage from "...pathtoassetfolder/reactimage.jpg" 

并将其作为道具传递给组件。

我猜测CardTitle中有一个<img src=... />元素，因此将prop传递到src字段就可以了。

或者如果您以组件样式使用背景，则可以传递道具：

backgroundImage: `url(${prop})`