Images occasionally don't render correctly

[jmanns]

When including images in the HTML string they don't always render correctly. I think it depends on the size of the image. For large images it seems to happen more often. Maybe if the MathJax is finished before the image downloads is the cause of the problem. Below is an example with a large image

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

main() async {
  runApp(FlutterTeXExample());
}

class FlutterTeXExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Flutter TeX Example"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              TeXView(
                  keepAlive: true,
                  key: UniqueKey(),
                  renderingEngine: RenderingEngine.Katex,
                  loadingWidget: Center(child: CircularProgressIndicator()),
                  teXHTML: katexTeXHTML,
                onRenderFinished: (_) {
                    print('render finished');
                },
                onPageFinished: (_) {
                  print('page finished');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

String katexTeXHTML = r"""
   <p>
     A simple Example to render \( \rm\\TeX \) in flutter with full <B>HTML</B> support<br><br>
 
     When \(a \ne 0 \), there are two solutions to \(ax^2 + bx + c = 0\) and they are
 
     $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$<br>
 
 
     Bohr Radius
 
     \( a_0 = \frac{{\hbar ^2 }}{{m_e ke^2 }} \)<br>
 
     Relationship between Energy and Principal Quantum Number
 
     \( E_n = - R_H \left( {\frac{1}{{n^2 }}} \right) = \frac{{ - 2.178 \times 10^{ - 18} }}{{n^2 }}joule \)<br><br>
  
     <br><br>
   </p>

    Inline Chemistry Equations <br>
         <p>    
     \( \ce{CO2 + C -> 2 CO} \) <br>
  
     \( \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} \) <br><br><br>

     Scroll long formulas $$ \ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O} $$ <br>
     
    </p>
    <img src="https://img.wallpapersafari.com/desktop/1920/1080/84/27/nMWzIB.jpg" />
    <br>
   """;

[shah-xad]

You can do something like this.

    <img onload="RenderedWebViewHeight.postMessage(document.getElementById('teXHTML').clientHeight);"
    src="https://img.wallpapersafari.com/desktop/1920/1080/84/27/nMWzIB.jpg" />

Do put this onload="RenderedWebViewHeight.postMessage(document.getElementById('teXHTML').clientHeight);" in your img tag, it'll recalculate the height and rerender the page after the image loading completes.

[jmanns]

Thanks I'll give it a try.

[jmanns]

Perfect, that fixed the issue for me. Thanks a lot.

[shah-xad]

Glad to know this. Now I am closing this.

[rahulkapoor1]

@shah-xad Thank you for the support!
I need to place the same logic in the Quiz sample to refresh all views, once images in the quiz and options render.

[rahulkapoor1]

Nevermind, I resolved that by using - "TeXViewRenderedCallback.postMessage(document.getElementById('TeXView').clientHeight);";