Further improve and complement figures about atlas

[geek-yang]

Regarding the placeholder for unavailable figures, after some googling, it seems that an easy and clean solution will be the @error handler in nuxt, see the post. However, it does not work in our case. I tried most of the suggested solutions I could find (e.g. like this, and the other post). Still did not get anything working for me.

[geek-yang]

An alternative would be, load image via computed property and use if/else pair in the computed: {} function. But it is a bit nasty.

[geek-yang]

One more idea, we can place the img inside the div. Set the div background to be the placeholder image using css. And move all the figures from assets to static (which means, we do not load figures dynamically via webpack, but statically). Then, when the images are missing, it only returns an error in the console, but the page is still there, which will display nothing but shows the background.

Again, just some thought, but the solution is still not perfect. We have to discuss it a bit.

[Peter9192]

What happened to the idea we started off with, adding a callback to update the figure when the selection was changed? Why did it not work?

[Peter9192]

And move all the figures from assets to static (which means, we do not load figures dynamically via webpack, but statically)

Probably fine, but not sure it's needed.

One more idea, we can place the img inside the div

We used to have that before, but we changed to a div with background image because it was easier to get the responsive stretching right.

[geek-yang]

@Peter9192 Your solution #22 looks very good to me. Indeed my attempt was to use the error event handler and place the fallback there. But the nuxt option (@error) does not work for no reason. But your code simply does what I want. I will stick to it instead. Thanks for the solution!