How to escape a question mark in a background-image URL?

Hi there,

This is probably a very basic question but I’ve not been able to find any answers. I have a custom:button-card setup on my dashboard that I want to show an background image on. The url refers back to a Reolink RLC-410 still image as below:

           # Front Door
          - type: custom:button-card
            template: camera-card
            styles:
              card:
                [background-image: url("http://xxx.xxx.xxx.xxx/cgi-bin/api.cg?cmd=Snap&channel=0&rs=abx123&user=&password=")]
            entity: camera.front_door
            style:
              top: 60.35%
              left: 74.6%
              width: 10%

This gives me the following error:

’ ### expected ‘,’ or ‘]’, but got ‘?’

Any idea what the solution could be? I’ve tried all the usual approaches to escape a question mark such as using a ‘’ but still doesn’t work.

Many thanks,
Iain

%3F

It‘s called url-encoding.

Thanks for your response. I tried escaping the ‘?’ using URL encoding but it still didn’t work. I think it must be a limitation of the button-card custom element as I was able to make it work by using the entity-picture option and some custom styling.

Still a learning experience as I now know more about URL encoding than I did before!

Thanks again :slight_smile:

Actually just checked what a button-card is and i think, that the style values are directly mapped to CSS properties.

So, the following could work.

card:
  - background: url(http://xxx.xxx.xxx.xxx/cgi-bin/api.cg?cmd=Snap&channel=0&rs=abx123&user=&password=)

Because it’s CSS and not HTML/XML, there’s no need to do URL encoding.

Just a blind guess

1 Like

I was lucky as because I specified an image URL for the camera entity I didn’t even need to use the url in the end (although that didn’t stop me trying for a long time before I realised this!).

This is the code I used to give the button-card a background of the CCTV taken each time it is reloaded (once every minute):

            # Front Door
          - entity:
            type: custom:button-card
            entity: camera.front_door
            style:
              top: 68%
              left: 51%
              width: 10%
            template: camera-card

camera-card:
    template: ['base']
    show_entity_picture: true
    show_state: false
    styles:
      card:
        [padding: 0, color: 'rgba(0, 0, 0, 0.6)']
      name:
        [position: absolute, width: 110%, height: 25%, top: 75%, left: 0%, background: 'rgba(255, 255, 255, 0.8)', text-align: left, padding: 2.5% 0 0 11%, color: 'rgba(0, 0, 0, 0.4)', font-size: 1vw, letter-spacing: 0.025vw]
      entity_picture:
        [position: absolute, width: 140%, height: 105%, top: 0%, left: -20%]

Thanks again for coming back - it’s really appreciated and shows what a nice community this is :slight_smile: