Javascript ReactJS-Java脚本：图像未正确显示在

我正在使用AISHub和外部数据库构建一个船只可视化工具

我感兴趣的所有血管都被注射到一个表中。当我点击表格时，我在地图上找到了标记血管，该血管的图像在地图右侧的侧栏上弹出，如下所示：

我的问题是，我还应该可视化血管的图像，但不幸的是，我只可视化一个奇怪的图标，如下所示：

代码如下：

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 I console.log该问题可能是导致该奇怪图标的原因，结果该命令的值是一个奇怪的路径。我可以确认命令是正确的。我还要说，这些图像目前由一个名为的外部容器保存。控制台日志后的路径下方：

我是不是在路上遗漏了什么？ 我不知道如何继续前进，因为所有其他检查似乎都是正确的，而这是唯一一个对我有影响的检查。

---

感谢您为解决此问题指明了正确的方向。

@Emanuele，您能试试这个吗

---

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

你能试试这个src={ship.images.fields.files.url}@harmandepsingkalsi吗，谢谢你阅读这个问题。发生了一些事情，我得到了TypeError：无法读取未定义的属性“url”。有用吗？类型错误：应该是文件和文件。ship.images.fields.file.url谢谢：这很有效！！如果你写下答案，我可以接受。太好了，很高兴帮助你！