What is the solution for changing image sources dynamically in React-Native?

How can I access image sources from a JSON file without encountering a module error when using JSON objects as the source?

JSON FILE:

 {
   "Image": {"source": "./SourceFolder/ImageFile.png"}
 }

JS FILE

 const data = require('./jason.json');
 var imageSource = JSON.stringify(data.Image);
 imageSource = JSON.parse(imageSource);

 <Image source={require(imageSource.source)} />

Answer №1

Unfortunately, dynamic requires are not supported. It is necessary to pre-require all images beforehand, so that they can be dynamically accessed using a reference.

const imageCollection = {
  img1: require('image_file.png'),
}

<Image source={imageCollection["img1"]} />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

What is the right way to utilize Fetch in JavaScript and Django?

I am currently working on creating a METAR decoder similar to the one shown in this image: https://i.stack.imgur.com/P40uG.png For this project, I am implementing the use of the fetch function in Vanilla JavaScript. The goal is to send the inputted code t ...

The JavaScript button's onClick event is not functioning properly, despite the method executing normally

I'm currently working on creating a button using JavaScript that, when clicked, will trigger an AJAX request to some PHP code. Interestingly, I have already set up three buttons with the same functionality and they are all functioning perfectly. Wha ...

Angular: Utilizing property interpolation from fetched JSON

As I attempt to create a test questionnaire using a json response, I encounter errors in the console stating 'Cannot read property 'Title' of undefined'. It seems like the string interpolation is trying to occur before receiving the res ...

Utilize Javascript to perform operations on ndb.key()

When working with my application, I encounter keys that are created within a Python system and written to Google Datastore. To access the corresponding data, I require the IDs of these items, which are contained in the 'key' string. Unfortunate ...

Exchange information among unrelated components

I'm working on implementing a vue event bus to facilitate event communication between my components. In my app.js file, I have included the line Vue.prototype.$eventBus = new Vue();. Within one component, I trigger an event using: this.$eventBus.$emit ...

Display JSON data retrieved from PHP script on Windows Phone 8.1 platform

After running a PHP file, I receive the following JSON data: {"Name":"Waqas","Age":37,"Address":"Kanju"} Interestingly, when I try to execute the same method on Windows Phone, I get the exact same JSON output: {"Name":"Waqas","Age":37,"Address":"Kanju"} ...

Combining Extjs combo with autocomplete functionality for a search box, enhancing synchronization capabilities

When using autocomplete search, I've encountered an issue. If I type something and then make a mistake by deleting the last character, two requests are sent out. Sometimes, the results of the second request come back first, populating the store with t ...

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

Navigating in next.js

Whenever I run my program, it displays the following error message: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component ...

There seems to be an issue with the performance of Google script .setFormula when used in conjunction with the

Hello everyone, I have written a script that inserts formulas in a specific range and set up a trigger for it to run between 01:00 and 02:00 AM. The purpose is to subscribe the values with the formulas and then paste the resulting values. However, I am fac ...

Using Angularjs to dynamically generate and submit tables

I can't seem to figure out this specific situation Data: $scope.MyItem = [ { "__v": 0, "myItemId": "55ed819caefe18e81ffbd2d2", "itemId": "56fec8abb192c870117ed393", "january": 1, "february": 1, ...

I am not encountering any errors; however, upon entering the room, my bot fails to initiate creation of a new channel

const Discord = require("discord.js") const TOKEN = "I forgot to include my token here" const { Client, GatewayIntentBits } = require('discord.js'); const { MemberFetchNonceLength } = require("discord.js/src/errors/Erro ...

Disabling specific time slots in the mat select functionality

I have a scenario where I need to display time slots at 30-minute intervals using Mat Select. export const TIME=["12:00 AM","12:30 AM","01:00 AM","01:30 AM","02:00 AM","02:30 AM","03:00 AM&qu ...

Ways to Implement an Origin's First-Party Cookies While Using it as a Third-Party

Imagine I am the owner of a website called "treat1creator.com". I want my clients, who are also website owners, to send HTTP requests to my server that contain cookies I have generated. Here is how it works: User "Sally" visits my site at treat1creator.co ...

Resolving Logic Errors in PostMapping

My service contains a method that is able to save a fruit in all the stores it has. This method functions properly in the main method, but encounters issues when used with Postman. Upon testing with Postman, only one instance of the fruit is created instea ...

Display the JSON data in a table only if the ID is a match

I am working on a table that consists of 5 rows and 2 columns. Each row is assigned an ID ranging from 1 to 5. My goal is to insert JSON data into the table, but only if the ID in the data matches the ID of the corresponding row. If there is no matching I ...

Using Laravel to submit a form with identical input names via AJAX

Seeking assistance with my ajax function. A form I have is submitting data with the same input name. Without using JavaScript, I can insert multiple input data with the same name easily, Here is the structure of the submitted data {"_token":& ...

What is the process for building .ts components within a Vue application?

Looking to update an old project that currently uses the 'av-ts' plugin and vue-ts-loader to compile .ts files as Vue components. The project is running on Vue 2.4.2, but I want to upgrade it to version 2.6.14. However, since 'vue-ts-loader& ...

Using jQuery with Rails 3 for Efficient Callback Handling

I have been working on creating my own custom confirm dialogs that take two parameters. function myAlert(message, address) { jConfirm(message, 'Confirmation Dialog', function(response) { if (response){ window.location = a ...