Files
flipper/docs/setup/images-plugin.md
Pascal Hartig 2e3499cd4a Flipper Release: v0.25.0
Summary:
**Highlights**

- Android: Leakcanary is no longer part of the core distribution but a separate artifact: `com.facebook.flipper:flipper-leakcanary-plugin`.

Reviewed By: priteshrnandgaonkar

Differential Revision: D17601074

fbshipit-source-id: 862fc44d45b4ddc95059deb3959476af162b1cb0
2019-09-26 11:05:37 -07:00

100 lines
2.8 KiB
Markdown

---
id: images-plugin
title: Images Setup
sidebar_label: Images
---
Currently, the images plugin only supports [Fresco](https://frescolib.org/) for Android as backend, but just like the network plugin, support for other image loading libraries
could easily be added. Send us a PR!
## Fresco and Android
The Fresco images plugin is shipped as a separate Maven artifact:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-images-plugin:0.25.0'
}
```
After including the plugin in your dependencies, you can add it to the
client:
```java
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
client.addPlugin(new FrescoFlipperPlugin());
```
The `FrescoFlipperPlugin` constructor offers a whole lot of configuration options which
can be useful if you have an advanced setup of Fresco in your application:
```java
FrescoFlipperPlugin(
DebugImageTracker imageTracker,
PlatformBitmapFactory bitmapFactory,
@Nullable FlipperObjectHelper flipperObjectHelper,
DebugMemoryManager memoryManager,
FlipperPerfLogger perfLogger,
@Nullable FrescoFlipperDebugPrefHelper debugPrefHelper,
@Nullable CloseableReferenceLeakTracker closeableReferenceLeakTracker) { ... }
```
### Leak Tracking
The Flipper plugin can help you track down `CloseableReferences` who have not had
`close()` called on them. This can have a negative impact on the performance of
your application.
To enable this functionality, you need to create a `CloseableReferenceLeakTracker`
and set it in both your `ImagePipelineConfig` for Fresco and the `FrescoPluginPlugin`
on creation.
```java
import com.facebook.imagepipeline.debug.FlipperCloseableReferenceLeakTracker;
// ...
FlipperCloseableReferenceLeakTracker leakTracker = new FlipperCloseableReferenceLeakTracker();
new ImagePipelineConfig.Builder()
// ...
.setCloseableReferenceLeakTracker(leakTracker)
.build();
client.addPlugin(new FrescoFlipperPlugin(
new FlipperImageTracker(),
Fresco.getImagePipelineFactory().getPlatformBitmapFactory(),
null,
new NoOpDebugMemoryManager(),
new NoOpFlipperPerfLogger(),
null,
leakTracker));
```
### Attribution
In order to annotate images with the context they are used in, you have to set a
caller context when loading the image. This can be any object, so for the simplest
case, a String will suffice.
```java
String callerContext = "my_feature";
// For DraweeViews:
draweeView.setImageURI(uri, callerContext);
// For prefetching:
ImagePipeline imagePipeline = Fresco.getImagePipeline();
imagePipeline.prefetchToDiskCache(imageRequest, callerContext);
// For manually fetching an image:
DataSource<CloseableReference<CloseableImage>>
dataSource = imagePipeline.fetchDecodedImage(imageRequest, callerContext);
```
If a caller context is supplied, the image will be properly attributed in the
Flipper image plugin.