How to display image with URL in flutter
Question
I want to display an image represented by the link https://www.authenticatorApi.com/pair.aspx?AppName=MyApp&AppInfo=John&SecretCode=12345678BXYT with CachedNetworkImage but get this Failed to decode image error. However clicking the link directly will show you the qrcode image.
Please what can I do?
2 answers
solution1
0 2022-09-25 02:57:22
That's not an image link, use an image that end with image extension like.png or.jpeg or.jpg or any other image format
some link like this
https://www.w3schools.com/html/pic_trulli.jpg
solution2
0 ACCPTED 2022-10-10 18:57:13
This link is not an image, it's an html with an image inside, so use webview or flutter_html to display it in a container.
class WebViewExample extends StatefulWidget {
const WebViewExample({Key? key}) : super(key: key);
@override
State<WebViewExample> createState() => WebViewExampleState();
}
class WebViewExampleState extends State<WebViewExample> {
@override
void initState() {
super.initState();
// Enable virtual display.
if (Platform.isAndroid) WebView.platform = AndroidWebView();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:const Text('WebView'),),
body: const WebView(
initialUrl:
'https://www.authenticatorapi.com/pair.aspx?AppName=MyApp&AppInfo=John&SecretCode=12345678BXYT',
),
);
}
}
import 'package:flutter_html/flutter_html.dart';
class FlutterHtmlExample extends StatefulWidget {
const FlutterHtmlExample({Key? key}) : super(key: key);
@override
State<FlutterHtmlExample> createState() => FlutterHtmlExampleState();
}
class FlutterHtmlExampleState extends State<FlutterHtmlExample> {
@override
void initState() {
super.initState();
}
final htmlData = r'''<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<iframe src="https://www.authenticatorApi.com/pair.aspx?AppName=MyApp&AppInfo=John&SecretCode=12345678BXYT" title="W3Schools Free Online Web Tutorials"></iframe>
</body>
</html>''';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:const Text('WebView'),),
body: SingleChildScrollView(
child: Html(
data: htmlData,
),
)
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.