Popup media image not showing

AndrewTerwiel — Fri, 10 Dec 2021 22:10:04 GMT

I'm using ArcGIS JS 4.6.

I can't get images to display in my popups on mobile devices when using Chrome, neither iOS or Android Chrome browsers will work. Safari on iOS works fine.

When I inspect the DOM while running the webpage in the Chrome device emulator as iPhone 6/7/8 I see the attributes of the img tag as this:

But doing this for Galaxy S5 gives this:

Notice the size here is 0 x 0 pixels, but the one that is working properly is 180 x 135 pixels.

This is my code for the popup template content property

function getPlayGroundPopupContent(feature) {
            var retVal = [];
            var assetId = feature.graphic.attributes.assetId;
            _siteImage = "https://.../maps/playgrounds/images/" + assetId + ".jpg";
            var text;
            text = {
                type: "text",
                text: "<span class='playgrounds-expression-toilet'>{expression/toilet}</span></br>{playEquip}"
            };


            var media = {
                type: "media",
                mediaInfos: [{
                    type: "image",
                    value: {
                        sourceURL: "https://.../maps/playgrounds/images/" + assetId + ".jpg"
                    }
                }]
            };

            retVal.push(text);
            retVal.push(media);

            return retVal;
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

^Updated

^{I've solved this problem. My stylesheet was hiding this element in a media query.}

^{This was the css:}

.esri-popup-renderer__content-element:last-child {
        display: none;
    }‍‍‍

topic Popup media image not showing in ArcGIS JavaScript Maps SDK Questions

Popup media image not showing