MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Image in module not showing on mirror browser

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    12 Posts 4 Posters 1.8k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • lavolp3L Offline
      lavolp3 Module Developer
      last edited by

      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

      How to troubleshoot modules
      MMM-soccer v2, MMM-AVStock

      M bugsounetB S 3 Replies Last reply Reply Quote 0
      • M Offline
        MMRIZE @lavolp3
        last edited by

        @lavolp3
        Maybe CORS rule exception?

        1 Reply Last reply Reply Quote 0
        • bugsounetB Offline
          bugsounet Banned @lavolp3
          last edited by

          @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?

          lavolp3L 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @lavolp3
            last edited by

            @lavolp3 open the developers window and select the console tab to see the error

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            lavolp3L 1 Reply Last reply Reply Quote 0
            • lavolp3L Offline
              lavolp3 Module Developer @sdetweil
              last edited by

              @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?

              How to troubleshoot modules
              MMM-soccer v2, MMM-AVStock

              S 2 Replies Last reply Reply Quote 0
              • lavolp3L Offline
                lavolp3 Module Developer @bugsounet
                last edited by

                @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.

                How to troubleshoot modules
                MMM-soccer v2, MMM-AVStock

                S 1 Reply Last reply Reply Quote 0
                • S Away
                  sdetweil @lavolp3
                  last edited by

                  @lavolp3 use the cors service in MM… someone has to change the code to change the link

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  lavolp3L 1 Reply Last reply Reply Quote 0
                  • lavolp3L Offline
                    lavolp3 Module Developer @sdetweil
                    last edited by

                    @sdetweil What’s the CORS service in MM?
                    I see I have been away for a while…

                    How to troubleshoot modules
                    MMM-soccer v2, MMM-AVStock

                    S 2 Replies Last reply Reply Quote 0
                    • S Away
                      sdetweil @lavolp3
                      last edited by

                      @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…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • S Away
                        sdetweil @lavolp3
                        last edited by sdetweil

                        @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

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy