質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ストレージ

ストレージとは、データを長期で保管・保存しておくための記憶装置。ハードディスクやDVD、CDなどが主なストレージとして挙げられます。PCでは作成データの他、OSやアプリケーションがインストールされています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

0回答

1412閲覧

ローカルストレージに保存した画像が表示できない

ShunsukeHigashi

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ストレージ

ストレージとは、データを長期で保管・保存しておくための記憶装置。ハードディスクやDVD、CDなどが主なストレージとして挙げられます。PCでは作成データの他、OSやアプリケーションがインストールされています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/06/21 22:37

前提・実現したいこと

ローカルストレージに保存した画像をHTMLのimgタグで表示したいと考えています。

発生している問題・エラーメッセージ

画像をバイナリー形式からbase64にエンコードし、ローカルストレージに保存する所まではできたのですが、
localStrage.getItem("key")でローカルストレージの画像を取ってこようとするとうまく表示されません。
イメージ説明

エラーメッセージ
特に出ていません。

該当のソースコード

ソースコード
<template>

<div> <p>タイトル:<input type="text" v-model="title" /></p> <p><input type="file" @change="onFileChange" v-if="view" /></p>
<p>画像</p> <img class="img" :src="display" width="200" height="100" />
</div> </template> <script> export default { data() { return { file: "", title: "", view: true, base64: "", data_url_scheme: "", display: "", }; }, methods: { onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { this.data_url_scheme = reader.result; //画像のバイナリー形式をbase64にエンコード this.base64 = window.btoa(this.data_url_scheme) //ローカルストレージに"picture"というキー名で画像を保存 window.localStorage.setItem( "picture", "data:image/jpeg;base64," + this.base64 ); }; alert("登録完了"); window.localStorage.getItem("picture"); }, }, created() { //ローカルストレージから画像を取ってくる console.log(window.localStorage.getItem("picture")); this.display = window.localStorage.getItem("picture"); }, }; </script> <style> .img { width: 100px; } </style>

試したこと

localstrage.getItem()でストレージ内の画像データが取ってこれているかをconsole.logで確認しましたが、
ちゃんと取れてきていました。
イメージ説明
imgタグでのバインドのさせ方が間違っているのでしょうか、、、

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問