React Native中如何从JSON文件加载本地图片？

核心问题 #

React Native的Image组件加载本地图片时，不能直接传入字符串路径，必须使用require('图片路径')返回的模块对象作为source值。你当前直接将JSON中的字符串路径传给source，导致图片无法被正确解析加载。

解决步骤 #

1. 调整JSON中的图片路径（可选但推荐） #

将JSON里的imageLink改为仅保留图片文件名，避免路径层级混淆：

[
  {
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "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
  }
]

2. 修改组件代码，正确使用require加载本地图片 #

在AudiosBooksBox组件中，将Image的source改为通过require加载，同时补充width样式确保图片完整显示：

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();
  // 拼接固定路径前缀+文件名，通过require加载图片
  const imageSource = imageLink ? require(`../images/${imageLink}`) : null;

  return (
    <View>
      <View
        style={{
          width: width,
          height: width * aspectRatio,
          marginBottom: 10,
          borderRadius: 20,
        }}>
        {imageSource && (
          <TouchableHighlight
            onPress={() =>
              navigation.navigate('SingleBook', {
                title,
                year,
                pages,
                link,
                language,
                imageLink,
                country,
                author,
                overview,
                vote,
                duration,
                actor,
              })
            }>
            <Image style={styles.image} source={imageSource} />
          </TouchableHighlight>
        )}
        {!imageSource && <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: {
    width: '100%', // 补充width样式，确保图片适配容器
    height: '100%',
    borderRadius: 20,
    marginLeft: 10,
    marginRight: 5,
  },
  wrap: {
    marginTop: 10,
    marginBottom: 10,
    width: 180,
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

3. 确认路径正确性 #

确保../images/这个相对路径是相对于AudiosBooksBox组件文件的位置。例如：如果组件在src/components/AudiosBooksBox.js，images文件夹在src/images/，那么../images/就是正确的层级关系。

注意事项 #

• React Native的require对动态路径有限制，必须保留固定的路径前缀（比如../images/），不能全动态传入任意字符串，否则打包工具无法识别图片资源。
• 若图片文件名包含特殊字符或空格，建议重命名为字母/数字组合，避免加载异常。

内容的提问来源于stack exchange，提问作者greta calamari