javascript - ReactJS-Java 脚本 : Image is not properly showing inside a

Question

我正在使用 AISHub 和外部数据库构建船舶可视化器 Contentful 。

我感兴趣的所有容器都被注入(inject)到表中。当我单击表格时，我在 map 上找到标记(船只)，该船只的图像会弹出在 map 右侧的侧边栏上，如下所示:

我遇到的问题是我还应该可视化船只的图像，但不幸的是我只可视化了一个奇怪的图标，如下所示:

代码下方:

class Sidebar extends React.Component {
    state = {
        ships: []
    };

    async componentDidMount() {
        let response = await Client.getEntries({
            content_type: 'cashmanCards'
        });
        const ships = response.items.map((item) => {
            const { name, slug, type, company, description, images, companylogo } = item.fields;
            return {
                name,
                slug,
                type,
                company,
                description,
                images,
                companylogo
            };
        });

        this.setState({
            ships
        });
    }

    getFilteredShips = () => {
        if (!this.props.activeShip) {
            return this.state.ships;
        }

        return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
    };

    render() {
        return (
            <div className="map-sidebar">
                {this.props.activeShipTypes}
                <pre>
                    {this.getFilteredShips().map((ship) => {
                        console.log(ship);

                        return (
                            <Card className="mb-2">
                                <CardImg />
                                <CardBody>
                                    <div className="row">
                                        {/* <div className="column"> */}
                                        <img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
                                    </div>
                                    <div>
                                        <img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
                                    </div>
                                    <CardTitle>
                                        <h3 className="thick">{ship.name}</h3>
                                    </CardTitle>
                                    <CardSubtitle>{ship.type}</CardSubtitle>
                                    <CardText>
                                        <br />
                                        <h6>Project Details</h6>
                                        <p>For a description of the project view the specification included</p>
                                    </CardText>
                                    <div class="btn-toolbar">
                                        <SpecsButton />
                                        <Link to="/vessels/Atchafalaya" className="btn btn-primary">
                                            Go to vessel
                                        </Link>
                                    </div>
                                </CardBody>
                            </Card>
                        );
                    })}
                </pre>
            </div>
        );
    }
}

export default Sidebar;

到目前为止我所做的事情:

1) 我 console.log() 的问题可能是导致该奇怪的图标的原因，并且该命令的结果(值)是一个奇怪的路径。我可以确认命令是正确的。我还应该说，这些图像当前由名为 Contentful 的外部容器保存。 。控制台日志后的路径下方:

我在路上遗漏了什么吗？我不知道如何继续，因为所有其他检查似乎都是正确的，而这是唯一一个给我敲响警钟的检查。感谢您为解决此问题指出了正确的方向。

Answer 1

@Emanuele，你可以试试这个吗？

src = {ship.images.fields.file.url}