Hello everyone i'm trying to link a local image( contained in my images file ) in my json but it doesn't seem to work. i tried like this :

    [
  {
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "../images/img_libro1.jpeg",
    "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
  },

and in the component i call the link like this :

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

export default function AudiosBooksBox({
  title,
  width,
  aspectRatio,
  author,
  imageLink,
  country,
  overview,
  vote,
  duration,
  actor,
  year,
  pages,
  link,
  language,
}: any) {
  const navigation = useNavigation();
  return (
    <View>
      <View
        style={{
          width: width,
          height: width * aspectRatio,
          marginBottom: 10,
          borderRadius: 20,
        }}>
        {imageLink && (
          <TouchableHighlight
            onPress={() =>
              navigation.navigate('SingleBook', {
                title,
                year,
                pages,
                link,
                language,
                imageLink,
                country,
                author,
                overview,
                vote,
                duration,
                actor,
              })
            }>
            <Image style={styles.image} source={imageLink} />
          </TouchableHighlight>
        )}
        {!imageLink && <Text>immagine mancante</Text>}
      </View>

      <View style={styles.wrap}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.title}>{author}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    color: '#1C0D45',
  },
  image: {
    height: '100%',
    borderRadius: 20,
    marginLeft: 10,
    marginRight: 5,
  },
  wrap: {
    marginTop: 10,
    marginBottom: 10,
    width: 180,
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

it doesn't give me any errors and there is the image's shape but no image . How can i achieve this thing? thank you in avance . those are my folders:

CodePudding user response：

First you need to modify your JSON to send only the local image name like this, (without .jpeg)

{
    "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
  }

Then inside your code, try accessing the image like this

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]} />;