时间戳

首页 > 解决方案 > 为什么 ReactJs 说我把它放在 Card.img#src 中时链接或路径已损坏？

reactjs - 为什么 ReactJs 说我把它放在 Card.img#src 中时链接或路径已损坏？

问题描述

我正在使用 ReactJs-bootstrap，并且我有一张卡片，里面有图像。

在卡片里面有<Card.Img>我从 ReactJs-bootstrap 导入的标签。

那里有Card.Img属性'src'。当我尝试更改'src'它时，它会损坏图片，就好像它path是错误的一样。

我试图寻找答案，但我找不到任何与 React-bootstrap 有此问题的问题

{ * 图片的相对路径是'MainAppDict/src/images/rfm.jpg }

我的卡片组件：

import React, { Component } from 'react'

import {Accordion, Card, Button} from  'react-bootstrap/dist/react-bootstrap'

export default class ProductCardComponent extends Component{
constructor(props) {
    super(props)

}
render() {
    return (
        <div>
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src="../../images/rfm.jpg" />
             {*** the relative path of the image is 'MainAppDict/src/images/rfm.jpg**}
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
                </Card.Text>
            </Card.Body>

                <Accordion defaultActiveKey="0">
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="0">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                        <Card.Body>some text</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="1">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                        <Card.Body>Hello! I'm another body</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="1">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                        <Card.Body>Hello! I'm another body</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                </Accordion>


            <Card.Body>
                <Card.Link href="#">Card Link</Card.Link>
                <Card.Link href="#">Another Link</Card.Link>
            </Card.Body>
            </Card>



            {/* <Accordion defaultActiveKey="0">
                <Card>
                    <Card.Header>
                    <Accordion.Toggle as={Button} variant="link" eventKey="0">
                        Click me!
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                    </Accordion.Collapse>
                </Card>
                <Card>
                    <Card.Header>
                    <Accordion.Toggle as={Button} variant="link" eventKey="1">
                        Click me!
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="1">
                    <Card.Body>Hello! I'm another body</Card.Body>
                    </Accordion.Collapse>
                </Card>
            </Accordion> */}
        </div>
    )
}

}

标签： reactjsreact-bootstrapbootstrap-cards

解决方案

根据您的项目设置，这可能会有所不同，但很可能您需要先导入图像。

import imageUrl from '../../images/rfm.jpg';

如果您使用带有适当加载器（如file-loader等）的webpack，imageUrl则在构建应用程序后， 的值将自动成为图像的路径。因此，您可以像这样使用该值：

<Card.Img variant="top" src={imageUrl} />

推荐阅读