Importing Different Images into the Image Component by path, url or base64.
See original GitHub issueQuestion
Guys, since I am already having problems importing image I need to show different images in each mode, but when trying
<Image
href={require(`../../../assets/images/questions/${imageName}.png`)}//eslint-disable-line
/>
an error is returned
Loading dependency graph, done.
error: bundling failed: src\components\OptionImage\index.js: src\components\OptionImage\index.js:Invalid call at line 39: require("../../../assets/images/questions/" + imageName + ".png")
trying
<Image
href={require('../../../assets/images/questions/'+imageName+'.png')}
/>
an error is returned
Loading dependency graph, done.
error: bundling failed: src\components\OptionImage\index.js: src\components\OptionImage\index.js:Invalid call at line 38: require('../../../assets/images/questions/' + imageName + '.png')
using
<Photo
href={require('../../../assets/images/questions/default.png')}//eslint-disable-line
/>
works but gets static image I can’t change
could anyone help thank you.
Issue Analytics
- State:
- Created 4 years ago
- Comments:8
Top Results From Across the Web
Importing Different Images into the Image Component by path ...
here is an image of the problem, i need to use the <image/> component of react-native-svg , which has transitions and that uses...
Read more >React - static images sometimes importing image path ...
I noticed that when importing images, it seems to randomly import either the path to that image, or the base64 data. code example...
Read more >An easier way to upload / retrieve images using Spring boot ...
When coming to store images, we usually do the following: 1- Encode them in Base64 2- Transfer them 3- Convert them to raw...
Read more >Using images - Canvas API - MDN Web Docs
Another possible way to include images is via the data: URL. Data URLs allow you to completely define an image as a Base64...
Read more >Importing images with Webpacker - rossta.net
Folder structure. First, where should you put your images? It doesn't matter. The easiest place to start is under your app/javascript folder ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Require each object into a variable, create a object with properties set to those values, then use a key to access the one you need with what ever logic you want:
@msand, thank you for your attention yes , work with the example above:
because the link you submitted does not use the
<Image/> component react-native-svg
, butreacts-native
, so it didn’t solve the problem but with this other example it uses image for base64. And using base64 eliminates the problem of transitions that are no longer the number of times this problem is specific thanks again for the feedback