javascript - React.js如何在函数中插入自定义URL

Question

我有一个函数，我希望它解析一个卡片图像的url。
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'/> 

不过，上面的方法是使用外部url
我想解析一个本地路径
例如

<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})`