<![CDATA[Image in module not showing on mirror browser]]>HI,
I have an issue where an image is not loading on the browser of the mirror itself, while on Firefox on my laptop, it shows.

The image is loaded in MMM-Sonos:

                    if (item.track.albumArtURI !== null && item.track.albumArtURI !== undefined && item.track.albumArtURI.trim() !== "") {
                        albumCover.innerHTML = `<img src="${item.track.albumArtURI}" width="80" height="80">`;
                    } else {
                        albumCover.innerHTML = `<img src="SonosRadio.png" width="80" height="80">`;
                    }
                    container.append(albumCover);

It seems to be some browser problem, because as said, on a laptop browser the image is shown.

Any ideas?

Thanks,
Dirk

]]>https://forum.magicmirror.builders/topic/18146/image-in-module-not-showing-on-mirror-browserRSS for NodeFri, 15 May 2026 07:35:57 GMTMon, 06 Nov 2023 08:46:10 GMT60<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 23:28:31 GMT]]>@lavolp3 see also
https://forum.magicmirror.builders/topic/18131/possible-cross-origin-issue

]]>https://forum.magicmirror.builders/post/112349https://forum.magicmirror.builders/post/112349Mon, 06 Nov 2023 23:28:31 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:53:54 GMT]]>@lavolp3 said in Image in module not showing on mirror browser:

But I can try to use electron’s developers tab.

yes, have to do it where the error is

]]>https://forum.magicmirror.builders/post/112332https://forum.magicmirror.builders/post/112332Mon, 06 Nov 2023 12:53:54 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:51:17 GMT]]>@lavolp3

use this as the url

Example input request url: 

http://address:port/cors?sendheaders=header1:value1,header2:value2&expectedheaders=header1,header2&url=http://www.test.com/path?param1=value1

so when you break that down

http://address:port MM address (can be localhost, or ip address) and port
url= the original url
sendheaders= whatever headers you need to set when sending
expectedheaders= whatever headers are expected on response

]]>https://forum.magicmirror.builders/post/112331https://forum.magicmirror.builders/post/112331Mon, 06 Nov 2023 12:51:17 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:42:05 GMT]]>@lavolp3 the systems are getting more sensitive to attackers everywhere

MM is on a system using 0.0.0.0 probably and that gets sent in the browser making the request and the remote system says, I don’t know where that it, its ‘NOT’ in my allowed systems…

]]>https://forum.magicmirror.builders/post/112330https://forum.magicmirror.builders/post/112330Mon, 06 Nov 2023 12:42:05 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:41:01 GMT]]>@sdetweil What’s the CORS service in MM?
I see I have been away for a while…

]]>https://forum.magicmirror.builders/post/112329https://forum.magicmirror.builders/post/112329Mon, 06 Nov 2023 12:41:01 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:39:28 GMT]]>@lavolp3 use the cors service in MM… someone has to change the code to change the link

]]>https://forum.magicmirror.builders/post/112328https://forum.magicmirror.builders/post/112328Mon, 06 Nov 2023 12:39:28 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:39:11 GMT]]>@bugsounet Hi thanks for the help.
Will consider reworking the code, but as said, it does work on an external browser, so the code itself should not be the issue, would it?
Rather the interpretation by the browser or any frontend behaviour when downloading the file.

]]>https://forum.magicmirror.builders/post/112327https://forum.magicmirror.builders/post/112327Mon, 06 Nov 2023 12:39:11 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 12:37:00 GMT]]>@sdetweil that’s what I usually do, but here the error is not reproducible on any other browser. But I can try to use electron’s developers tab.

However, I strongly suspect the reason is @MMRIZE 's CORS issue.
But have no real idea how to solve that.

Anybody want to give me a hint?

]]>https://forum.magicmirror.builders/post/112325https://forum.magicmirror.builders/post/112325Mon, 06 Nov 2023 12:37:00 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 11:56:28 GMT]]>@lavolp3 open the developers window and select the console tab to see the error

]]>https://forum.magicmirror.builders/post/112324https://forum.magicmirror.builders/post/112324Mon, 06 Nov 2023 11:56:28 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 11:32:04 GMT]]>@lavolp3
Hi, what happen really? only show default image? Or the same? Nothing?

Maybe typeOf is better for check uri value
Maybe, InnerHtml is not the better way

  • create an img element
  • use img.src=“uri”
  • use an css class for width/height
  • maybe add an seed for use not image cache
  • create a function for update it

Can we see current full code for inspect?

]]>https://forum.magicmirror.builders/post/112323https://forum.magicmirror.builders/post/112323Mon, 06 Nov 2023 11:32:04 GMT<![CDATA[Reply to Image in module not showing on mirror browser on Mon, 06 Nov 2023 09:07:07 GMT]]>@lavolp3
Maybe CORS rule exception?

]]>https://forum.magicmirror.builders/post/112322https://forum.magicmirror.builders/post/112322Mon, 06 Nov 2023 09:07:07 GMT