フロント側をFlutter(スマホ)Thymeleaf(PC)、バックエンド側SpringBootの自動作成勉強中
10:24
①今日は、画像表示を調べている。
まず、以下Image.networkで画像表示をやったが、”Http request faild. statusCode 403”になった。バックエンド側SpringのWebSecurityConfig.javaで『'/upload/**』は、ユーザーまたは管理者権限でログインしてないと見れないとしているからだろうと思う。
ログインはしているが、多分、Image.networkでは、ログインしていることを、バックエンド側に伝えられていないからだろう。
child: Image.network( Consts.myHttpUrl + '/upload/item/A2204190001/item27.png',
17:53
①NetworkImageまたは、CachedNetworkImageProviderを使って、画像表示ができた。
・NetworkImageまたは、CachedNetworkImageProviderは、HTTPヘッダーを設定してURL画像を取ってくることができるので、ユーザーまたは管理者権限でログインしていれば『'/upload/**』を見れる。
・キャッシュされた画像を表示してしまうのを防ぐため、URL+'?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now())としている。表示の都度、URL画像を取得しに行くので時間はかかるけど、これがないとサーバーの画像が書き換わってもキャッシュを表示してしまうと思うから。
//--テスト画像表示 start---------------------------- contentWidgets.add( Row ( children: <Widget>[ // テスト画像の表示フォーム Container( margin: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 5), padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0), child:const Text('画像 : ', textAlign: TextAlign.left, overflow: TextOverflow.clip, ), ), Container( margin: const EdgeInsets.fromLTRB(5, 0, 5, 5), padding: const EdgeInsets.fromLTRB(5, 0, 5, 0), width: 80.0, height: 80.0, decoration: BoxDecoration( shape: BoxShape.rectangle, image: DecorationImage( //image: CachedNetworkImageProvider( image:NetworkImage( Consts.myHttpUrl + '/upload/item/A2204190001/item27.png?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now()), headers: widget.headers ), fit: BoxFit.cover, ), ), ), ] ), ); //--テスト画像表示 end----------------------------
■2022/06/15に、勉強した成果:『Flutter_JavaSpringプログラム自動作成◎自動生成ツール』をVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev