2

我正在使用此页面中的示例，以及从道具加载的卡片组示例。我的道具是硬编码的，如下所示：

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>

结果是：

imgsFromProps

如果我以声明方式对卡进行硬编码，我可以使用 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）为什么当图像被硬编码时，它不会以与导入语句中提供的图像相同的路径呈现，该路径是否有效？

4

1 回答 1

1

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

速记道具生成以下标记：

<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
于 2017-07-31T16:35:51.370 回答