Image not appearing when wrapped in a widget using custom rendering #328
Description
I have a temporary fix which is using a custom renderer for img tags and check if the parent is A tag in the gesture detector onTap handler but that also brings another issue, the image will not display if I use the child passed to the render function.
Will not work:
customRender: {
'img': (renderContext, child, attributes, node) {
var src = attributes['src'];
var alt = attributes['alt'] ?? src;
return GestureDetector(
onTap: () {
+ // ignore click on images wrapped in "A" tag.
+ if (node.parent?.localName == 'a') {
+ return;
+ }
Navigator.of(context).push(
MaterialPageRoute<Null>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(alt)),
body: Container(
child: PhotoView(imageProvider: NetworkImage(src)),
),
);
},
fullscreenDialog: true,
),
);
},
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
+ child: child,
),
);
}Will work:
customRender: {
'img': (renderContext, child, attributes, node) {
var src = attributes['src'];
var alt = attributes['alt'] ?? src;
return GestureDetector(
onTap: () {
// ignore click on images wrapped in "A" tag.
if (node.parent?.localName == 'a') {
return;
}
Navigator.of(context).push(
MaterialPageRoute<Null>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(alt)),
body: Container(
child: PhotoView(imageProvider: NetworkImage(src)),
),
);
},
fullscreenDialog: true,
),
);
},
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
- child: child,
+ child: Image.network(src),
),
);
}_Originally posted by @devhammed in #301 (comment)