Question

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

我感兴趣的所有血管都注入表中。当我点击表格时，我在地图上找到了标记（容器），该船只的图像弹出在地图右侧的侧边栏上，如下所示：

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

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的外部容器保存。控制台日志后的路径下方：

path

我在路径中缺少什么吗？我不确定如何继续进行下去，因为所有其他检查似乎都是正确的，而这是唯一给我敲响警钟的检查。感谢您为解决此问题指明了正确的方向。

Answer 1

@Emanuele，您能代替这个吗？

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

ReactJS-Java脚本：图像未正确显示在<div>

1 个答案: