Comments (6)
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.
from atlas.
An alternative would be, load image via computed property and use if/else pair in the computed: {}
function. But it is a bit nasty.
from atlas.
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.
from atlas.
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?
from atlas.
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 thediv
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.
from atlas.
@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!
from atlas.
Related Issues (20)
- Fix placeholder for ASK and CMIP5
- ASK constrained maps are not correct HOT 1
- add contributor information HOT 1
- Add letters for comparison option
- Extend about pages
- Fix climatology_bounds of the preprocess data
- Refactor history of preprocessed data HOT 1
- reviewnb integration HOT 1
- Constraint dropdown is not filled on eucp-project.github.io/atlas/ HOT 2
- Cannot find module '@nuxtjs/fontawesome' HOT 1
- Add data documentation to data entry on zenodo
- Zenodo integration failed HOT 4
- Add tooltip to plus button
- Adding row from placeholder fails.
- Add search functionality to about page
- Change multiple dropdowns at once
- Make weights available
- Add time periods to FAQ HOT 1
- Rephrase explanation of 50-th percentile
- Rephrase "which method is best"
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from atlas.