Dynamically referencing svgs in result cards

Search Best Practices - Search Front-End
1

Hello,

I am building an experience that has a vertical that returns results for the US states. I want to feature an image of the state silhouette on each card, which I have in my repo as an svg (in static/assets/images) with naming pattern of [[stateName]].svg, so
static/assets/images/Alabama.svg
static/assets/images/Illinois.svg

How can I update my cards/component.js (or hbs) file to dynamically surface the right svg for the state? I tried using simple concatenation (image below) but got errors running webpack:

image
image1072×244 33.6 KB

I would appreciate any advice or guidance the community has.

2

Hi Liz,

Unfortunately, as you’ve run into, webpack needs a fully defined asset path in order to be able to process images at build time. Whenever an asset path is written out in the code it needs to be hardcoded. This means it’s not possible to truly dynamically reference assets, but you can still dynamically select between hardcoded options.

You should be able to do something like

const images = {
  'Alabama': 'static/assets/images/Alabama.svg',
  'California': 'static/assets/images/California.svg',
  etc...
}

and then in your return set

image: images[profile.name]

Hope this is helpful!

1 Like
3

Hi @Ben_Haines - thanks for the guidance. This worked for us!