Image has a lot of white space.

[b5710546291]

the html element is in the list and it push everything else off the screen.

Using the latest master
Any solution to this?

  Html(
    data: r'<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Cloud_banner.jpg" />',
    style: {
      "html": Style.fromTextStyle(TextStyle(fontSize: 16)),
    },
  ),

[erickok]

I don't really see anything wrong with this. What is it that you were expecting? Can you provide a minimal reproducible example?

[b5710546291]

edit out because the images size is too large

[b5710546291]

@erickok can you try running the following code and see if the image height is taken most of the screen like me or not.

  ListView(
    children: <Widget>[
      Container(color: Colors.red,height: 48,),
      Html(
        data: r'<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Cloud_banner.jpg" />',
        style: {
          "html": Style.fromTextStyle(TextStyle(fontSize: 16)),
        },
      ),
      Container(color: Colors.green,height: 48,),
    ],
  )

I print out the size from image configuration which reported to be Size(4452.0, 636.0). My device Size from media query is Size(375.0, 667.0). I think giving raw size to image made it too big on my screen. Can you made it to something like aspect ratio instead?

flutter_html/lib/src/replaced_element.dart

Lines 151 to 165 in 0226739

	imageWidget = FutureBuilder<Size>(
	future: completer.future,
	builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
	if (snapshot.hasData) {
	return new Image.network(
	src,
	width: snapshot.data.width,
	height: snapshot.data.height,
	frameBuilder: (ctx, child, frame, _) {
	if (frame == null) {
	return Text(alt ?? "", style: context.style.generateTextStyle());
	}
	return child;
	},
	);

[erickok]

Thanks for the report. I fixed this in #486.

[arthur-fontaine]

I have always the issue... I'm with the version 1.30.0.

Column(
  children: [
    Align(
        alignment: FractionalOffset.centerLeft,
        child: Row(children: [
          sourceImg,
          Padding(
              padding: EdgeInsets.only(
                  left: 25.0 / 2),
              child: Text(source,
                  style: _articleSourceTextStyle))
        ])),
    Padding(
        padding: EdgeInsets.symmetric(
            vertical: 25.0),
        child: Text(title,
            style: _articleTitleTextStyle)),
    Html(
        data: htmlCode,
        onLinkTap: (String url) {
          launch(url);
        },
      )
  ],
),

However, the issue does not occur when I use:

Html(
    data: r'< img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Cloud_banner.jpg" />',
  ),

[erickok]

@arthur-fontaine could you post the html you used to reproduce the issue?

[arthur-fontaine]

oh sure! you can find it on this PasteBin: https://pastebin.com/XjG0xFCG

[erickok]

Hmm @arthur-fontaine this is caused by the html explicitly defining the image (width and) height.

width="988" height="568"

What a browser does in this case is just to use this real size, which would clip the image, requiring you to have to horizontally scroll. That is probably also not what you want, but at least it would make sense.

[arthur-fontaine]

does removing width="988" height="568" with Regex could be a solution? does the image will automatically fit?

[erickok]

Yes it will. Though I still consider this a bug to be fixed, which is why I re-opened the ticket.