无法从反应中的道具加载 CardGroup 中的图像。semantic-ui

Question

我正在使用 this page 中的示例，结合从 props 加载的 Card Group 示例。我的道具是硬编码的，如下所示：

import tellUsWhoImg  from './assets/images/matchScreen.PNG'

const items = [
    {
        image: './assets/images/matchScreen.PNG',
        header: 'tellUsWho',
        description: 'Applying Scala functional programming concepts to generate a set of ' +
        'JSON matches for every user to take our survey',
        meta: 'Match Generation Algorithm',
    },  
    {
        image: {tellUsWhoImg},
        header: 'tellUsWho',
        description: 'Applying Scala functional programming concepts to generate a set of ' +
        'JSON matches for every user to take our survey',
        meta: 'Match Generation Algorithm',
    }
 //etc....
]

并声明我的卡组，如示例所示：

const ProjectCardGroup = () => (
    <Container text style={{ marginTop: '7em' }}>
        <Card.Group items={items}/>
    </Container>

结果：

如果我以声明方式硬编码我的卡片，我可以使用 import 语句而不是绝对路径加载图像没有问题？:

<Container text style={{ marginTop: '7em' }}>
    <Card.Group>
       <Card>
       <Card.Content>
        <Image  size='medium' src={tellUsWhoImg} />
        <Card.Header>
            tellUsWho
        </Card.Header>
        <Card.Meta>
            Match Generation Algorithm
        </Card.Meta>
        <Card.Description>
            Applying Scala functional programming concepts to generate a set of
            JSON matches for every user to take our survey
        </Card.Description>
    </Card.Content>
    </Card>
    <Card>
        <Card.Content>
            <Image  size='medium' src='./assets/images/matchScreen.PNG' />
            <Card.Header>
                nodeJS Distributed WebCrawler
            </Card.Header>
            <Card.Meta>
                nodeJS/Redis/EC2
            </Card.Meta>
            <Card.Description>
                Utlizing redis as a centralized job queue installed via AWS Elasticache,
                able to spawn ec2 nodes and run multiple nodeJS worker instances to scour amazon to detect
                price discrepancies in books for trade-in value
            </Card.Description>
        </Card.Content>
    </Card>
    </Card.Group>
<Container>

导致：

这让我想到了三个问题：

1) 为什么我尝试通过道具加载图片时格式会发生变化？（灰色header部分）

2) 为什么图片无法通过 props 加载？

3) 为什么当图像被硬编码时，它不使用导入语句中提供的图像的相同路径渲染？

Answer 1

Why does the format change when I try to load the images via props? (the grey header section)

速记道具生成以下标记：

<Card>
   <Image src="..." />
   <Card.Content />
</Card>

当您将 Image 包裹在 内 Card.Content 时，这会产生另一个样式结果。

Why does the image not load via props?

image: './assets/images/matchScreen.PNG',

我几乎可以肯定此路径无效并且您的网络服务器 returns 404 错误。

image: {tellUsWhoImg},
image: {tellUsWhoImg: tellUsWhoImg},

你应该在那里提供一个对象，第二个字符串说明了一个问题。正确用法：

image: tellUsWhoImg,

Why when the image is hardcoded does it not render with the same path to the image that is supplied in the import statement that DOES work?

路径不同：

导入路径是相对于你的JS文件的目录
硬编码路径是相对于您的 www-root

无法从反应中的道具加载 CardGroup 中的图像。semantic-ui

Can't load images in CardGroup from props in react.semantic-ui

reactjs

semantic-ui

semantic-ui-react