locked
How to change the image if Image URI is same even with different image? RRS feed

  • Question

  • User365558 posted

    Hello,

    I am using following code for Carousel view. I have images where if user change the image, it keeps WebURI same. Following is UI flow. 1- User go to profile 2- From profile, user have option to go to images page where user can add images. When user add the image, it save to server with same WebURI. 3- Now, user come back to Profile page. Here it shows same image even I recall the API on Appearing of the page and add the Pictures again.

    Actually I am using FFImageLoading but I have tried with simple Image control as well.

    With FFImageLoading

    <StackLayout Orientation="Vertical" VerticalOptions="Center">
      <forms:CarouselView x:Name="MainCarosel" ItemsSource="{Binding Pictures}"  Position="{Binding Position}" IsVisible="{Binding IsImageVisible}" RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
        <forms:CarouselView.ItemTemplate>
          <DataTemplate>
            <ff:CachedImage Source="{Binding .}" CacheDuration="0" Aspect="AspectFill" RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
            </ff:CachedImage>
          </DataTemplate>
        </forms:CarouselView.ItemTemplate>
      </forms:CarouselView>
      <local:CarouselIndicators IsVisible="{Binding IsImageIndicatorVisible}" Margin="0,-30,0,0" IndicatorHeight="8" IndicatorWidth="8" UnselectedIndicator="icon_dot_off" SelectedIndicator="icon_dot_on" Position="{Binding Position}" ItemsSource="{Binding Pictures}" />
    </StackLayout>
    

    With simple Image

    <StackLayout Orientation="Vertical" VerticalOptions="Center">
      <forms:CarouselView x:Name="MainCarosel" ItemsSource="{Binding Pictures}"  Position="{Binding Position}" IsVisible="{Binding IsImageVisible}" RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
        <forms:CarouselView.ItemTemplate>
          <DataTemplate>
            <Image Aspect="AspectFill" RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
              <Image.Source>
                <UriImageSource Uri="{Binding .}"
                  CachingEnabled="false"/>
              </Image.Source>
            </Image>
          </DataTemplate>
        </forms:CarouselView.ItemTemplate>
      </forms:CarouselView>
      <local:CarouselIndicators IsVisible="{Binding IsImageIndicatorVisible}" Margin="0,-30,0,0" IndicatorHeight="8" IndicatorWidth="8" UnselectedIndicator="icon_dot_off" SelectedIndicator="icon_dot_on" Position="{Binding Position}" ItemsSource="{Binding Pictures}" />
    </StackLayout>
    

    ViewModel

    public async Task Appearing()
    {
        await getAllData();
    }   
    
    private async Task getAllData()
    {
        ProfileData Profile =  GetProfile(); //API Call
        Pictures = new List<string>();
        //One Way binding with control
        Pictures = Profile.Pictures.Select(t => t.Value).ToList();  
    }
    
    Monday, August 6, 2018 2:39 PM

Answers

  • User369979 posted

    If you use the native Image control with UriImageSource and has disabled the CachingEnabled, image will load source from your web server every time even though using same urls.

    For FFImageLoading, try to add ImageService.Instance.InvalidateCacheAsync(FFImageLoading.Cache.CacheType.All); before loading the image sources. This will remove the caches. Then even though FFImageLoading loads a same url, it will not find a corresponding cache in the memory or disk.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, August 7, 2018 7:28 AM

All replies

  • User369979 posted

    If you use the native Image control with UriImageSource and has disabled the CachingEnabled, image will load source from your web server every time even though using same urls.

    For FFImageLoading, try to add ImageService.Instance.InvalidateCacheAsync(FFImageLoading.Cache.CacheType.All); before loading the image sources. This will remove the caches. Then even though FFImageLoading loads a same url, it will not find a corresponding cache in the memory or disk.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, August 7, 2018 7:28 AM
  • User198446 posted

    And as for CarouselView I propose to use https://github.com/AndreiMisiukevich/CardView

    Friday, November 9, 2018 7:50 AM