Question

我正在使用this page中的示例，以及从“道具”加载的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）当我尝试通过道具加载图片时，为什么格式会改变？（灰色标题部分）

2）为什么图像不通过道具加载？

3）为什么当图像被硬编码时，它是否使用与导入语句中提供的图像相同的路径进行渲染？

Answer 1

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

Shorhand道具生成以下标记：

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

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

为什么图像不能通过道具加载？

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

我几乎可以肯定此路径无效，您的网络服务器返回404错误。

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

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

image: tellUsWhoImg,

为什么当图像被硬编码时，它是否使用与导入语句中提供的图像相同的路径进行渲染？

路径不同：

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

无法从react.semantic-ui中的props加载CardGroup中的图像

1 个答案: