HarmonyOS鸿蒙Next中RN使用FileJSBundleProvider加载bundle，本地图片不展示

HarmonyOS鸿蒙Next中RN使用FileJSBundleProvider加载bundle，本地图片不展示按照鸿蒙RN文档创建AwsomeProject, 使用<Image> 加载本地图片资源，使用FileJSBundleProvider加载 JS Bundle文件，无法展示本地图片。

eggper 1楼•14 天前

RN加载本地图片资源，需要在RN侧代码确定资源位置，具体可以看空工程的测试用例，RN侧代码为RN工程MainProject下的tests文件夹内的ImageTest.tsx。

这是RN侧的代码：

import React from 'react';
import { Image, View, StyleSheet } from "react-native";

const TestPhone = () => {
  return (
    <View style={styles.gallery}>
      <Image
        source={require('./assets/placeholder2000x2000.jpg')}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '33.333%',
    aspectRatio: 1,
  },
  gallery: {
    width: '100%',
    flexWrap: 'wrap',
    flexDirection: 'row',
    flex: 1
  },
});

export default TestPhone;

需要注意的是：要将本地图片下载到沙箱目录之中，并且按照RN侧加载文件的路径进行放置。比如说RN文件放在的沙箱文件files下的，而加载本地图片的路径为 “./assets/XXX.jps”，那就得把图片下载到和RN文件同级目录下的assets文件夹下。RN文件和图片文件都是相对于 context.filesDir 目录下的路径。

更多关于HarmonyOS鸿蒙Next中RN使用FileJSBundleProvider加载bundle，本地图片不展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•14 天前作者

兄弟，解决了吗？

vueper 3楼•14 天前

在HarmonyOS鸿蒙Next中，使用RN（React Native）开发时，通过FileJSBundleProvider加载bundle后，如果本地图片不展示，可能是以下原因导致的：

图片路径问题：确保图片路径正确，路径需使用相对路径或绝对路径，并且路径区分大小写。
图片资源未打包：检查图片是否已正确打包到应用的资源目录中。在鸿蒙Next中，图片资源需放在resources目录下，并确保在jsbundle中正确引用。
图片加载方式：在RN中，本地图片需使用require或import方式加载。例如：<Image source={require('./image.png')} />。
图片格式支持：确保图片格式是鸿蒙Next支持的格式，如PNG、JPEG等。
权限问题：检查应用是否具有读取本地文件的权限，鸿蒙Next中需在config.json中配置相应的权限。
缓存问题：清除应用缓存后重新加载，确保图片资源未被缓存机制影响。
调试工具：使用鸿蒙Next的调试工具，如DevEco Studio中的日志功能，检查图片加载时的错误信息。

通过以上步骤排查，可以解决本地图片不展示的问题。

yuanlaile 4楼•14 天前

在HarmonyOS鸿蒙Next中使用RN的FileJSBundleProvider加载bundle时，如果本地图片无法展示，可能是由于图片路径或资源加载机制的问题。确保图片路径正确，并使用require或Image.resolveAssetSource来加载本地图片。此外，检查FileJSBundleProvider的配置，确保资源文件正确打包并加载。如果问题依旧，可以尝试将图片放在assets目录下，并通过绝对路径引用。