Expo File System can't find or open local image

Question

I'd like to convert an image stored in root/assets/images/img.png to base64, using

   useEffect(() => {
      const convertImageToBase64 = async () => {
        try {
          const imageUri = 'assets/images/super.jpg'; // Replace with your image path
          const base64 = await FileSystem.readAsStringAsync(FileSystem.documentDirectory+imageUri, {
            encoding: 'base64',
          });
          console.log(base64);
        } catch (error) {
          console.error('Error converting image to base64:', error);
        }
      };
  
      convertImageToBase64(); // Call the conversion function when the component mounts
    }, []);

It says no file or directory: Error converting image to base64: [Error: Call to function 'ExponentFileSystem.readAsStringAsync' has been rejected. → Caused by: java.io.FileNotFoundException: /data/user/0/host.exp.exponent/files/assets/images/super.jpg (No such file or directory)]

I tried this to see what directories & files it could load:

useEffect(() => {
      const logFolderPaths = async () => {
        try {
          // Get the document directory
          const documentDirectory = FileSystem.documentDirectory;
          console.log('Document Directory:', documentDirectory);
          await listFilesAndFolders(documentDirectory);
    
          // Get the cache directory
          const cacheDirectory = FileSystem.cacheDirectory;
          console.log('Cache Directory:', cacheDirectory);
          await listFilesAndFolders(cacheDirectory);
    
          // Get the bundled assets directory
          const bundleDirectory = FileSystem.bundleDirectory;
          console.log('Bundle Directory:', bundleDirectory);
          await listFilesAndFolders(bundleDirectory);
    
          // Get the bundled assets directory (expo updates)
          const bundledAssetsDirectory = FileSystem.bundledAssetsDirectory;
          console.log('Bundled Assets Directory:', bundledAssetsDirectory);
          await listFilesAndFolders(bundledAssetsDirectory);
        } catch (error) {
          console.error('Error fetching folder paths:', error);
        }
      };
    
      const listFilesAndFolders = async (directory) => {
        try {
          const result = await FileSystem.readDirectoryAsync(directory);
          console.log(`Files and folders in ${directory}:`, result);
        } catch (error) {
          console.error(`Error listing files and folders in ${directory}:`, error);
        }
      };
    
      logFolderPaths();
    }, []); 

The document and cache directories work, but the bottom two returned this error: LOG Bundle Directory: asset:/// ERROR Error listing files and folders in asset:///: [Error: Call to function 'ExponentFileSystem.readDirectoryAsync' has been rejected. → Caused by: java.io.IOException: Unsupported scheme for location 'asset:///'.]
LOG Bundled Assets Directory: undefined Web Bundling complete 18ms ERROR Error listing files and folders in undefined: [Error: Call to function 'ExponentFileSystem.readDirectoryAsync' has been rejected. → Caused by: java.lang.NullPointerException: uriString]

Answer 1

Use Asset library to handle static resources.

An asset is any file that lives alongside the source code of your app that the app needs at runtime.

loadAsync downloads the asset data to a local file in the cache directory.

const [{ localUri }] = await Asset.loadAsync(require('./assets/images/super.jpg'));