Vue and img src not reactive since URL does not change (Geoserver getLegendGraphic)

1
votes

I have a situation regarding the src attribute of an image not being reactive. The thing is that I created a legend div for my Geoserver map and I fill the legend according to the WMS layers that I have loaded in my map. To show the legend icons in my legend div, I use the GeoServer getLegendGraphic request like this:

<img src="http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=myworkspace:mylayer">

The icons appear in the legend pretty well. The problem is that I have a functionality in my application that allows the user to change the style of the GeoServer layer. So now, I need the src attribute to make the request again so it gets the new icon image in the legend. However, because the URL is the same (only the response will be different), I can't make this to be reactive.

How can I overcome this?

1
srcgeoserver

1 Answers

1
votes

I solved it adding a parameter to the URL with a random value, so the URL could be different and so reactive.

"http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=myworkspace:mylayer" + "&myData:" + Math.random()