为什么 ReactJs 在 Card.img#src 中说 link 或路径已损坏？

Question

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

卡片内有我从 ReactJs 导入的 <Card.Img> 标签-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>
    )
}

}

Answer 1

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

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

如果您将 webpack 与适当的加载器（如 file-loader 等）一起使用，imageUrl 的值将在您构建应用后自动成为图像的路径。因此，您可以直接使用该值：

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

为什么 ReactJs 在 Card.img#src 中说 link 或路径已损坏？

Why ReactJs says the link or path is broken when I put it in Card.img#src?

reactjs

react-bootstrap

bootstrap-cards