How can I display images stored locally within a JSON file in a React Native application?

Hey everyone, I'm currently facing an issue with linking a local image from my images folder within my JSON data. Despite trying various methods, it doesn't seem to be working as expected.

[
  {
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "../images/img_libro1.jpeg",
    "language": "English",
    "overview": "Mrs. Dalloway, a novel by Virginia Woolf published in 1925, explores a day in the life of Clarissa Dalloway, a high-society Londoner married to a member of Parliament. The narrative lacks a conventional plot and delves primarily into the characters' consciousnesses. Through intertwining stories, particularly those of Clarissa preparing for a party and the mentally troubled war veteran Septimus Warren Smith, Woolf examines the nature of time in personal experience.",
    "link": "https://en.wikipedia.org/wiki/Mrs_Dalloway\n",
    "pages": 216,
    "title": "Mrs Dalloway",
    "year": 1925,
    "vote": "8",
    "aspectRatio": 1
  },

When calling the link in the component, I use the following code:

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {View, StyleSheet, Text, Image, TouchableHighlight} from 
'react-native';

// Component definition goes here...

const styles = StyleSheet.create({
  // Styles declared here...
});

Despite no errors being thrown and the shape of the image displaying correctly, the actual image does not appear. Any suggestions on how to resolve this issue would be greatly appreciated. Thank you in advance!

For reference, these are my current folder structures: https://i.sstatic.net/S1kqi.png

Answer â„–1

Start by adjusting your JSON data to only include the local image name without the file extension

{
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "img_libro1",
    "language": "English",
    "overview": "Mrs. Dalloway, novel by Virginia Woolf published in 1925. It examines one day in the life of Clarissa Dalloway, an upper-class Londoner married to a member of Parliament. Mrs. Dalloway is essentially plotless; what action there is takes place mainly in the characters’ consciousness. The novel addresses the nature of time in personal experience through multiple interwoven stories, particularly that of Clarissa as she prepares for and hosts a party and that of the mentally damaged war veteran Septimus Warren Smith. The two characters can be seen as foils for each other.",
    "link": "https://en.wikipedia.org/wiki/Mrs_Dalloway\n",
    "pages": 216,
    "title": "Mrs Dalloway",
    "year": 1925,
    "vote": "8",
    "aspectRatio": 1
  }

In your code, access the image using this method

const localImages = {
    img_libro1: require('../images/img_libro1.jpeg'),
    img_libro2: require('../images/img_libro2.jpeg'),
    img_libro3: require('../images/img_libro3.jpeg'),
  };
  // some code..
  <Image source={localImages[imageLink]} />;

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

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

Understanding the difference between NULL and the absence of a value is crucial when working with JSON Merge Patch in NetCore WebApi and System.Text

I am looking to implement support for partial updates using JSON Merge Patch. The current domain model follows the always valid concept and does not have any public setters. This makes it challenging to directly apply changes to the class types. As a resul ...

Steps to upload an image using an API

I am attempting to use an API to upload a file to imgBB, but I encountered the following error message: {"status_code":400,"error":{"message":"Empty upload source.","code":130},"status_txt":&q ...

An error occurs with webpack during postinstall when trying to load TypeScript

I have created a custom package that includes a postinstall webpack script as specified in my package.json file: "scripts": { ... "postinstall": "webpack" } The webpack configuration looks like this: const path = require('path'); ...

What is the most efficient way to use multiprocessing to insert a large number of documents (100 million) into a local MongoDB

I have been able to successfully insert selected keys from multiple JSON files into a local MongoDB database. However, as the collection grows beyond 100 million rows, the insertion process becomes extremely slow. I believe utilizing multiprocessing coul ...

How to insert a new key into JSON body using Swift

I've been struggling to figure out how to add a specific value (issue_id) to the body of a JSON from Swift. Despite my efforts, I haven't been able to find a clear answer or solution anywhere. I attempted to include it in the params section, but ...

How to read a Base64 encoded JSON file in an Android app using Java

I've developed a web service that can deliver PDF files in two different ways: RAW: The file is simply embedded in the response body. For instance: HTTP/1.1 200 OK Content-Type: application/pdf <file_contents> JSON: The file is encoded (Base ...

What steps should I take to enable TypeScript IntelliSense to recommend correct suggestions within discriminated unions?

I am working on creating a checkbox UI component based on a design in Figma. The outline variant is specified to only be compatible with the large size, while the solid variant can be used with all sizes. As a result, I am trying to build an interface whe ...

What is the best way to refresh the snapshots in my React/TypeScript project?

I am working on a React/TypeScript project that utilizes the Jest testing framework. Occasionally, after making changes to my code, Jest will compare it to the snapshots and generate an alert requesting me to update them. However, there are instances where ...

What is the best method for adding JSON objects in Logic Apps?

We are receiving a JSON message and want to include additional JSON data (a JSON object with various fields) in the original message. How can we insert the "GlossDef" JSON Object at the specified location below? { "glossary":{ "ti ...

When set to synchronize:true in Typeorm, any changes to an entity will result in the many-to

As a newcomer to typeorm, I've encountered a peculiar issue with the synchronize: true setting in my ormconfig.js. Whenever I make changes to an entity with a Many-to-Many relationship, any data present in the join table prior to the entity modificati ...

Tips for directing your attention to an input field in Angular

I'm struggling to find a simple solution for setting focus programmatically in Angular. The closest answer I found on Stack Overflow is about dynamically created FormControl, but it seems more complex than what I need. My situation is straightforward ...

What is the best way to convert exponential values to decimals when parsing JSON data?

var value = '{"total":2.47E-7}' var result = JSON.parse(value); Looking to convert an exponential value into decimal using JavaScript - any suggestions? ...

Array of Geographical Location Data Provided by Google Maps Geocoding

Utilizing a library for Google Geocoding API Wrappers (https://code.google.com/p/gmaps-api-net/) to retrieve or map a full address may sometimes result in inaccuracies. This is often due to missing address types returned by Google, causing discrepancies in ...

Challenges faced while working with React Native modules

I recently started a new React Native project using the CLI, naming it 'mobile'. However, I am encountering issues with missing modules such as fs, crypto, util, and more. Despite trying to manually install these modules as suggested in other Sta ...

The SortKey<> function is ineffective, even though the individual types it uses work perfectly fine

After my initial inquiry about TypeScript, the focus shifted to this current topic. In my previous question, I was attempting to develop a generic sort() method that could function with an array of sort keys defined by the SortKey type featured there (and ...

Retrieving information from Next.js and Typescript with the help of getStaticProps

I've been working on a personal project with Next.js and TypeScript. I'm attempting to fetch data from an API and then map the items, but I'm running into issues. When I use console.log, it returns undefined. The file is located in the pages ...

Tips for effectively passing generics to React Hooks useReducer

I am currently working with React Hooks useReducer in conjunction with Typescript. I am trying to figure out how to pass a type to the Reducer Function using generics. interface ActionTypes { FETCH, } interface TestPayload<T> { list: T[]; } inter ...

Restrict HTML Content in Json Result using PHP and Jquery

I'm currently working with a Controller that outputs JSON response and a JavaScript function that appends that response to the last tr in an HTML table. <pre> $reponse="<tr class=\"border_bottom\"><td>My Repo ...

Tips for sending a property to a React function component

I am having an issue with dynamically customizing the title in my stack navigation bar using react-navigation. Whenever I try to pass a string to it, I receive the error message below: Functions are not valid as a React child. This may happen if you retur ...