Laravel6 画面遷移の際にimgタグのsrc属性の値を保持したい

Question

前提・実現したいこと

• laravel6 を用いて、フォーム送信(同ページ)・エラーメッセージ表示によるページリダイレクトの際に写真のプレビュー表示を保持したいです。
• 現在はjQueryを用いて、画像選択後にプレビューを表示する実装を行なっています。
• 画像のプレビュー表示後、「料理名を推測する」ボタンを押すとコントローラに画像のパスがフォーム送信され、シェルコマンド(pythonコマンド)により推測した料理名と共に再度画像を表示したいです。

→調べていく中で「セキュリティ面から画像(ファイル)のデータ保持はできない」との記事を見ました。実現は厳しいのかな。。。

質問

実装は不可能かもしれないということを踏まえた上で質問させていただきます。

• 画面遷移後、再度画像を表示する処理を実装する方法はありますでしょうか。もしくはimgタグのsrc属性の保持・取得は可能でしょうか。

Answer 1

フォーム送信をする際にinput type='hidden'を配置し、jQueryでそのinputタグのvalue属性に画像データを追加してフォーム送信することでデータの値を保持できました。

<input type=hidden name='img_src'>

$(function() {
  $('#select_img').on('change', function(event) {
    // ファイルが選択された際に、ファイル名をボタン横に表示
    let selected_file = $(this).prop('files')[0];
    $('#file_name_text').text(selected_file.name);

    let reader = new FileReader()
    let file = event.target.files[0]

    // 画像ファイル以外は処理停止
    if(file.type.indexOf("image") < 0){
      return false;
    }

    // ファイル読み込みが完了した際に発火するイベントを登録
    reader.onload = function(e) {
        // .prevewの領域の中にロードした画像を表示
        $('#img').attr('src',e.target.result);
        $('#img_src').attr('value',e.target.result); ←追記
        // console.log(e.target.result);
    };
    reader.readAsDataURL(file);

    // guess();
  })
});