Xamarin Forms 图像绑定在 url 上，默认在嵌入资源上

Question

我有一个带有来自 Internet 的图像的 Xamarin ListView。我会显示一个默认图像（来自嵌入式资源），如果存在，则显示来自 url 的图像。

我已尝试使用此代码，但仅适用于 UriImageSource，不适用于嵌入式资源：

    <ListView ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
          <DataTemplate>
             <ViewCell>
                <Image>
                  <Image.Source>
                    <!-- does not works
                    <ImageSource>
       {utils:ImageResource Namespace.Assets.img-placeholder.png}
                    </ImageSource>
                    -->
                    <UriImageSource Uri="{Binding ImageUri}"></UriImageSource>
                  </Image.Source>
                </Image>
             </ViewCell>
         </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

如果我使用

<Image Source="{utils:ImageResource Namespace.Assets.img-placeholder.png}" />

这可以显示嵌入的资源默认图像

型号：

    public Uri ImageUri => Image != null ?
        new Uri($"http://www.example.com/{Image}")
        : null;

有什么帮助吗？谢谢

Answer 1

您可以使用FFImageLoading 库。

根据其文档：

加载占位符

ImageSource 属性。如果设置，则显示加载占位符，同时 加载。它支持 UriImageSource、FileImageSource 和 流图像源。

错误占位符

ImageSource 属性。如果设置，如果加载图像时发生错误，则 显示错误占位符。它支持 UriImageSource， FileImageSource 和 StreamImageSource。

Answer 2

您不必把它弄得那么复杂。从您的视图模型中，您只需提供 string ImageUri 并将其绑定到 Image.Source

<Image Source="{Binding ImageUri}" /> 

这适用于来自网络的图像以及资源，但它们必须存在于您的平台项目中。对于Android，您必须将它们放到Resources\drawable（或其他分辨率的相应文件夹）并将构建操作设置为AndroidResource，对于iOS，设置为Resources（不同大小与@ 987654326@, @3x 就足够了，例如img-placeholder@2x.png) 并将构建操作设置为捆绑资源。您现在可以从视图模型中设置占位符：

if(!HasRemoteImage(response))
{
    ImageUri = "img-placeholder.png";
}

Xamarin.Forms 会自动为你创建ImageSource。

与直接加载的资源相比，一个主要优势是，您不必关心哪个图像适合当前分辨率。 Xamarin/Xamarin.Forms 会自动为您执行此操作。