5f1a0548f5
Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
100 lines
2.8 KiB
Plaintext
100 lines
2.8 KiB
Plaintext
---
|
|
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-fresco-plugin:0.30.1'
|
|
}
|
|
```
|
|
|
|
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.
|