• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.
  • L Offline
    lavolp3 Module Developer
    last edited by Nov 6, 2023, 8:46 AM

    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 B S 3 Replies Last reply Nov 6, 2023, 9:07 AM Reply Quote 0
    • M Offline
      MMRIZE @lavolp3
      last edited by Nov 6, 2023, 9:07 AM

      @lavolp3
      Maybe CORS rule exception?

      1 Reply Last reply Reply Quote 0
      • B Offline
        bugsounet Banned @lavolp3
        last edited by Nov 6, 2023, 11:32 AM

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

        L 1 Reply Last reply Nov 6, 2023, 12:39 PM Reply Quote 0
        • S Offline
          sdetweil @lavolp3
          last edited by Nov 6, 2023, 11:56 AM

          @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

          L 1 Reply Last reply Nov 6, 2023, 12:37 PM Reply Quote 0
          • L Offline
            lavolp3 Module Developer @sdetweil
            last edited by Nov 6, 2023, 12:37 PM

            @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 Nov 6, 2023, 12:39 PM Reply Quote 0
            • L Offline
              lavolp3 Module Developer @bugsounet
              last edited by Nov 6, 2023, 12:39 PM

              @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 Nov 6, 2023, 12:42 PM Reply Quote 0
              • S Offline
                sdetweil @lavolp3
                last edited by Nov 6, 2023, 12:39 PM

                @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

                L 1 Reply Last reply Nov 6, 2023, 12:41 PM Reply Quote 0
                • L Offline
                  lavolp3 Module Developer @sdetweil
                  last edited by Nov 6, 2023, 12:41 PM

                  @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 Nov 6, 2023, 12:48 PM Reply Quote 0
                  • S Offline
                    sdetweil @lavolp3
                    last edited by Nov 6, 2023, 12:42 PM

                    @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 Offline
                      sdetweil @lavolp3
                      last edited by sdetweil Nov 6, 2023, 12:51 PM Nov 6, 2023, 12:48 PM

                      @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
                      1 / 2
                      • First post
                        8/12
                        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