Have a button card to show icons that doesn't work

[edlentz]

I am trying to get a button card to change the icon per the code from Openweathermap. So far I have this for my button

type: custom:button-card entity: sensor.openweathermap_weather_code show_name: false show_state: false show_icon: false styles: card: - padding: 0 - background: none - box-shadow: none grid: - grid-template-areas: '"i"' - grid-template-rows: auto - align-items: center img_cell: - justify-content: center - align-items: center image: - width: 100% - height: auto image: > [[[ const code = entity.state; return '/local/community/weathericons/' + { '200': 'storm.png', '804': 'rain.png', '800': 'sun.png' }[code] || 'default.png'; ]]]

This is just a test button with a couple of entries for the new icons. I can use a browser to render an icon using http://:8123/local/community/weathericons/storm.png I do not get any icon at all when the button is setup on a dashboard. I tried this in the button card and it worked

image: > [[[ return '/local/community/weathericons/rain.png'; ]]]
So does anyone have an idea what I am doing wrong? I appreciate any suggestions, as this is driving me crazy

Thanks

Ed

[ngocjohn]

Better if you use map function to generate url, I have something similar

  entity_picture: >
    [[[
      if (entity) {
        const weatherIcons = 
          {
            "clear-night":"clear-night.svg",
            "cloudy":"cloudy.svg",
            "fog":{
                "above_horizon":"fog.svg",
                "below_horizon":"fog-night.svg"
            },
            "lightning":{
                "above_horizon":"lightning.svg",
                "below_horizon":"lightning-night.svg"
            },
            "lightning-rainy":{
                "above_horizon":"lightning.svg",
                "below_horizon":"lightning-night.svg"
            },
            "partlycloudy":{
                "above_horizon":"partly-cloudy-day.svg",
                "below_horizon":"partly-cloudy-night.svg"
            },
            "pouring":{
                "above_horizon":"pouring-day.svg",
                "below_horizon":"pouring-night.svg"
            },
            "rainy":{
                "above_horizon":"rainy-day.svg",
                "below_horizon":"rainy-night.svg"
            },
            "hail":{
                "above_horizon":"rainy-day.svg",
                "below_horizon":"rainy-night.svg"
            },
            "snowy":{
                "above_horizon":"snowy-day.svg",
                "below_horizon":"snowy-night.svg"
            },
            "snowy-rainy":{
                "above_horizon":"snowy-day.svg",
                "below_horizon":"snowy-night.svg"
            },
            "sunny":"sunny.svg",
            "windy":"windy.svg",
            "windy-variant":"windy-variant.svg"
          };

        const weather = entity.state.toLowerCase();
        const sunState = states['sun.sun'].state;

        if (weatherIcons[weather]) {
          return typeof weatherIcons[weather] === 'object'
            ? `/local/img/weather_svg/${weatherIcons[weather][sunState]}`
            : `/local/img/weather_svg/${weatherIcons[weather]}`;
        } else {
          return '';
        }
      }
    ]]]