Adding an image to react-google-maps InfoWindow content

Question

Note: I am using the "react-google-maps" api and this is how my current InfoWindow is set up

{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>}

I was wondering how I add an image to the infowindow, I've seen it done with a content prop in other api's, and react-google-maps docs has a prop for updating the content, but I can't find how to set the content on their documentation. Any help is appreciated!

Answer 1

I figured out the problem: I needed to use a self-closing img tag.

instead of

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

it must be

<img src="..."/>