ReactJS - Java Script: Image is not properly showing inside a <div>

Question

I am building a boat visualizer using AISHub and the external database Contentful.

All the vessels I am interested are injected into a table. When I click on the table I locate the marker (vessel) on the map and the image of that vessel pops up on a sidebar on the right of the map as shown below:

The problem I have is that I should also visualize the image of the vessel, but unfortunately I only visualize a weird icon as shown below:

Below the code:

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;

What I have done so far:

1) I console.log() the problem that could be the cause of that weird icon and the result (the value) of the command was a strange path. I can confirm that the command is correct. Also I should say that those images are currently held by an external container called Contentful. Below the path after console log:

Am I missing something from the path? I am not sure how to move on as all other checks seems correct and this one is the only one that is ringing some bells to me. Thanks for pointing in the right direction for solving this issue.

Answer 1

@Emanuele , could you please try this instead ?

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