自定义组件需要图像输出

Question

我正在制作一个可重用的卡片组件，该组件接受所需的图像url，以下是代码:

import React from 'react'
export default function Card({ children, className, source }) {
return (
<div
className={className}
style={{ background: `url(${source})`, backgroundRepeat: 'no-repeat' }}
>
{children}
</div>
)
}

在浏览器中呈现时，path会在检查器中输出大量的路径数据:

输出这是正常的输出吗?

Answer 1

如果您的图像不在src文件夹中，则不能从相对路径导入它。试着把它放到src文件夹中，然后导入。

另外，background CSS属性包含多个背景声明，backgroundRepeat就是其中之一。如果你不需要所有可能的背景属性，我建议你用backgroundImage替换背景，因为这是你唯一使用它的东西。w3