I am trying to cache an image. The problem is that I receive it over an API whose response is in html format. I have simply used flutter_html package to render the response in my app. I save the response entirely in shared_preferences and show it to user. The problem now is that Everything else is just text so it is rendered when there is no internet but imageUrl can't be loaded obviously. I need help in maybe using flutter_html package or some kind of way to get it done.

My API response: "data":{ "description":" The world needs more people The world is underpopulated <img alt="" src="http://mayaalu.com/photos/1/Images_for_text_media/week-1.png" style="height:215px; width:238px" />" } I just display it with flutter_html:

Html( data: (data.description),),

CodePudding user response：

You can get that image from an HTTP get request (which gives you raw image bytes) when you fetch the data, and then you can store that in the local storage or local DB of your choice.

And show the image as Image.file or Image.memory constructor.

CodePudding user response：

You may extract image url from html and then use cache network image

Follow the below code

void main() {
  String myString =
      '''The world needs more people The world is underpopulated <img alt="" src="http://mayaalu.com/photos/1/Images_for_text_media/week-1.png" style="height:215px; width:238px" />"''';
  RegExp exp = RegExp(
      r"(http|ftp|https):\/\/([\w_-] (?:(?:\.[\w_-] ) ))([\w.,@?^=%&:\/~ #-]*[\w@?^=%&\/~ #-])");
  for (var m in exp.allMatches(myString)) {
    print(m.group(0));
  }
}

output: http://mayaalu.com/photos/1/Images_for_text_media/week-1.png

Note: if your image URL is current you will get response

CodePudding user response：

use customImageRender using which you can use package like cached_network_image to cache the image so next time you are offline your image will be displayed.

please see the documentation here https://pub.dev/packages/flutter_html