Cordova camera returning the wrong photo from library on iOS

Question

I'm using the camera plugin for Cordova (cordova-plugin-camera) to let the user take a new photo or choose one from their library. The strange thing is, that when I choose a photo from the lib, it works correctly the first time. But when I try to do the same thing again, but with a different photo, the wrong photo is returned - it is the same as in the first attempt.

To make it more clear:

1. I press a button to choose a photo -> I choose photo 1 from lib -> returns photo 1 correctly
2. I press the same button again -> I choose photo 2 from lib -> returns photo 1 again

If I then do the same thing the third time, it'll return photo 2 correctly.

Here is my code:

// get photo
$('#modal_crud').off('click', '.crud_template_image a.photo_take, .crud_template_image a.photo_select').on('click', '.crud_template_image a.photo_take, .crud_template_image a.photo_select', function() {

    var source_type = Camera.PictureSourceType.SAVEDPHOTOALBUM;
    if ($(this).hasClass('photo_take')) {
        source_type = Camera.PictureSourceType.CAMERA;
    }

    navigator.camera.getPicture(
        function(uri) {
            $('.crud_container:visible').find('.crud_edit_image').css({
                'background-image' : 'url(' + uri + ')'
            });
            $('.crud_container:visible').find('input.image_uri').val(uri);
        },
        function(message) {
            app.ui.show_notification('error', app.ui.translate_string('There was an error selecting an image: %s', [ message ]), true, undefined, $('.crud_container:visible').find('.modal_notifications'));
        }, 
        { 
            quality: 100,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: source_type,
            targetHeight: 400,
            targetWidth: 400
        }
    );
    return false;
});

Just as an addition, I'm saying iOS on the title of the question because I didn't have the opportunity yet to test on Android. I don't know if the behavior is also faulty there.

Answer 1

I finally found the reason for the faulty behavior. It was actually not the plugin returning the wrong URL, but the browser (webview) displaying the wrong image from cache. I think the plugin uses kind of the same URIs for different images (at least partially) which causes the browser to load the image from some kind of cache (I'm unsure where this comes from).

I solved the issue by adding a timestamp to the URI before displaying it. It now works perfectly fine for me.