将图像添加到 react-google-maps InfoWindow 内容答案

【问题标题】：Adding an image to react-google-maps InfoWindow content将图像添加到 react-google-maps InfoWindow 内容
【发布时间】：2021-10-20 17:42:18
【问题描述】：

注意：我正在使用“react-google-maps”api，这就是我当前 InfoWindow 的设置方式

{showingInfoWindow && selectedPlace === spot._id && <InfoWindow
            className="info-window"
            onCloseClick={onInfoWindowClose}
            position={{lat: spot.lat, lng: spot.lng}}
            >
              <div className="iw-container">       
                <strong className="iw-title">{spot.name}</strong>
                <div className="iw-content">
                <a href={'https://maps.google.com/?ll=' + spot.lat + ',' + spot.lng} target= "_blank" className="iw-subTitle">{spot.location}</a>
                  <div>Added By: {currentUser.displayName === spot.user ? "Me" : spot.user}</div>
                  <div>{spot.type}</div>
                  <div>{spot.desc}</div>
                  <div>{moment(spot.createdAt).format("MMM Do YYYY")}</div>
                  {/* <img src={`/server/uploads/${spot.createdAt.split('.')[0]+"Z"}.jpg`}> </img> */}
                </div>
              </div>
              </InfoWindow>}

我想知道如何将图像添加到信息窗口，我已经看到它使用其他 api 中的内容道具完成，并且 react-google-maps 文档有一个用于更新内容的道具，但我找不到如何在他们的文档上设置内容。任何帮助表示赞赏！

【问题讨论】：

标签： image google-maps infowindow react-google-maps

【解决方案1】：

你可以直接添加一个<img>标签作为<infowindow>的子标签

Sample codesn-p:

import React, { Component } from 'react';
import {
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from 'react-google-maps';


class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };
  }

  handleToggleOpen = () => {
    this.setState({
      isOpen: true
    });
  };

  handleToggleClose = () => {
    this.setState({
      isOpen: false
    });
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={{ lat:  -33.86882, lng: 151.209296 }}
        defaultZoom={13}
      >
        <Marker
          key={this.props.index}
          position={{  lat:  -33.86882, lng: 151.209296 }}
          onClick={() => this.handleToggleOpen()}
        >
          {this.state.isOpen && (
            <InfoWindow
              onCloseClick={this.props.handleCloseCall}
            >
             <img src="https://www.australia.com/content/australia/en/places/sydney-and-surrounds/guide-to-sydney/jcr:content/mainParsys/imagecontainer/imageContainerParsys/imagehighlights_835593945/ImageTile/imageHighlightsSrc.adapt.740.medium.jpg" width="250px" height="250px"/>
            </InfoWindow>
          )}
        </Marker>
      </GoogleMap>
    ));

    return (
      <div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: '500px' }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;

【讨论】：

当我小时候使用 img 标签时，我得到这个错误：× 错误：img 是一个空元素标签，既不能有children，也不能使用dangerouslySetInnerHTML。
你能提供一个sscce 你的代码吗？

【解决方案2】：

我发现了问题：我需要使用一个自动关闭的 img 标签。

而不是

<img src="..."> </img>

应该是

<img src="..."/>

【讨论】：