Display an image from the asset in the documentation

Question

I'm writing documentation about a variable and I would like to include an image that is inside the project. For example:

assets/
 |- icons/
 |   |- my-image.svg
lib/
 |- my_file.dart

I know it is possible to display an image from an URL, but what about one from a file?

Those were my unsuccessful tries:

// lib/my_file.dart

/// The image attempt:
/// ![](assets/icons/my-image.svg)
/// ![](../assets/icons/my-image.svg)
const myVariable = 0;

But it doesn't work:

---

Is there a way to do it?

Answer 1

1:open pubspec.yaml and click "Pub get"

2:

Image.asset("assets/icons/my-image.svg",width: 100,height: 100,)

Answer 2

So i think you want to let the variable hold the asset image path so do this

1. Go to pubspecs.yaml file and add this

   flutter: assets: - assets/icons/my-image.svg Then run flutter pub get

then you can use the image this way

//let the variable hold the image path
const myVariable = "assets/icons/my-image.svg";


//to display on widget
Image.asset(myVariable);

Answer 3

There is already an issue on GitHub: #2390 and also a related thread: Using local image assets in dart documentation comments

Effectively, web urls are working, but relative paths aren't, because VSCode doesn't support that. It tries to open the files relative to its application directory. But I can't confirm that for Windows either, because for me, not even absolute paths are working...

So if your project lives in a public repository anyways, you could just use a web url.

Answer 4

This can be achieved by using external url

/// Asset derived from `assets/images/icon_inactive_account.svg`.
///
/// <img src="https://user-images.githubusercontent.com/Flutter/assets/images/icon_inactive_account.svg" alt="icon_inactive_account" width="30" height="30" />
String get icon_inactive_account => 'assets/images/icon_inactive_account.svg';

or internal absolute path like this

/// Asset derived from `assets/images/icon_inactive_account.svg`.
///
/// <img src="/Users/Computer/Documents/Project/Flutter/assets/images/icon_inactive_account.svg" alt="icon_inactive_account" width="30" height="30" />
String get icon_inactive_account => 'assets/images/icon_inactive_account.svg';