Work with local image

[AlexCernik]

Hi, I have a problem with local images, {{ uri: file:///.. }} rendering component only if url exists but have a error "failed to cache image". Any solution? Thanks

[xerdnu]

Hi,

If you want to use local files you should use require and not uri. I will show example below.

<BlastedImage source={require('local_file.png')} style={{height:20,width:20}} />

Best regards 🚀

[AlexCernik]

Hi,

If you want to use local files you should use require and not uri. I will show example below.

<BlastedImage source={require('local_file.png')} style={{height:20,width:20}} />

Best regards 🚀

I'm use a package to pick a image from gallery, I obtain an uri but when I use "require()" this not work. I'm test "require(value.uri)" but not work.

[xerdnu]

Hi,

If you want to use local files you should use require and not uri. I will show example below.

<BlastedImage source={require('local_file.png')} style={{height:20,width:20}} />

Best regards 🚀

I'm use a package to pick a image from gallery, I obtain an uri but when I use "require()" this not work. I'm test "require(value.uri)" but not work.

What is the exact string you get returned from your imagepicker?

[Arthur-Noh]

Hi, If you want to use local files you should use require and not uri. I will show example below. <BlastedImage source={require('local_file.png')} style={{height:20,width:20}} /> Best regards 🚀

I'm use a package to pick a image from gallery, I obtain an uri but when I use "require()" this not work. I'm test "require(value.uri)" but not work.

What is the exact string you get returned from your imagepicker?

maybe like 'file:///data/user/0/com.myapp/cache/rn_image_picker_lib_temp_0798e626-7096-441c-88d5-296ad3680481.jpg'

I used the image uri that came out using react-native-image-picker. The iPhone will image normally, but Android will say "Failed to cache image" and will not work.

here is my sample code.

const result = await launchCamera({
  mediaType: 'photo',
  quality: 1,
  cameraType: 'back',
  saveToPhotos: true,
});
const uri = result.assets[0].uri || '' // 'file:///data/user/0/com.myapp/cache/rn_image_picker_lib_temp_0798e626-7096-441c-88d5-296ad3680481.jpg'

<BlastedImage
  source={{ uri }} // ios working well, but android not working
  style={{ width: 64, height: 64 }}
  resizeMode="cover"
/>

ios

android ERROR Error loading image: [Error: Failed to cache image] ERROR [Error: Failed to cache image]

[xerdnu]

@Arthur-Noh

What if you try to use originalPath (android-only) returned from the image-picker instead of uri?

[Arthur-Noh]

@Arthur-Noh

What if you try to use originalPath (android-only) returned from the image-picker instead of uri?

Is this how you would like me to do it?

const result = await launchCamera({
  mediaType: 'photo',
  quality: 1,
  cameraType: 'back',
  saveToPhotos: true,
});
const originalPath = result.assets[0]?.originalPath || '';

<BlastedImage
  source={{ uri: originalPath }}
  style={{ width: 64, height: 64 }}
  resizeMode="cover"
/>

Unfortunately, Android is still not working.

When I use launchCamera, the originalPath and uri are shown to be the same value. But when I used launchImageLibrary, originalPath and uri have different values but still don't work.

code

const result1 = await launchCamera({
  mediaType: 'photo',
  quality: 1,
  cameraType: 'back',
  saveToPhotos: true,
});

console.log('result1 =>', result1.assets[0]);

const result2 = await launchImageLibrary({
  mediaType: 'photo',
  quality: 1,
  selectionLimit: 1,
});

console.log('result2 =>', result2.assets[0]);

log

result1 => {
  "originalPath": "file:///data/user/0/com.myapp/cache/rn_image_picker_lib_temp_07e58bff-5505-4197-9d0c-c21471b8661d.jpg",
  "type": "image/jpeg",
  "height": 4000,
  "width": 3000,
  "fileName": "rn_image_picker_lib_temp_07e58bff-5505-4197-9d0c-c21471b8661d.jpg",
  "fileSize": 2988259,
  "uri": "file:///data/user/0/com.myapp/cache/rn_image_picker_lib_temp_07e58bff-5505-4197-9d0c-c21471b8661d.jpg"
}

result2 => {
  "originalPath": "/sdcard/.transforms/synthetic/picker/0/com.android.providers.media.photopicker/media/1000000539.jpg",
  "type": "image/jpeg",
  "height": 4000,
  "width": 3000,
  "fileName": "1000000539.jpg",
  "fileSize": 2988259,
  "uri": "file:///data/user/0/com.myapp/cache/rn_image_picker_lib_temp_de293aee-3f20-498e-aba4-feebb15e057b.jpg"
}

[xerdnu]

@AlexCernik @Arthur-Noh

Added support for file locations returned from react-native-image-picker, just update to version 1.0.7

Best regards! 🚀