Monacoにて端末ストレージ内の画像表示に関して

前提・実現したいこと

初心者ですがご教授いただきたいです。

Monacoにて端末に保存されている画像を表示して、落書きしたりスタンプができたりする子供向けアプリを作りたいと考えています。

早速というか初期段階？の画像表示が2～3日検索しているのですが解りません。

Monaco Docsという所も見て色々試してみたのですがお手上げ状態です。

どうかよろしくお願い致します。

一応スマホ端末はAndoroidになります。

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

初歩的なご質問かもしれませんが、どこか解りやすく参考になるサイトなどでの紹介やヒントでも構いませんで、よろしくお願い致します。

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

もう出来てるかもしれませんが、画像ファイル選択して表示するなら

html
1<template>
2<template>
3    <v-ons-page>
4      <input type="file" accept="image/jpeg,image/png" id="photo" @change="onFileChange" />
5      <img src="" id="image" width="200" :src="uploadedImage" />
6    </v-ons-page>
7</template>
8<script>
9  export default{
10    data() {
11      return {
12        uploadedImage: null
13      };
14    },
15    methods: {
16      onFileChange(e) {
17        const files = e.target.files || e.dataTransfer.files;
18        this.createImage(files[0]);
19      },
20      createImage(file) {
21        const reader = new FileReader();
22        reader.onload = e => {
23          this.uploadedImage = e.target.result;
24        };
25        reader.readAsDataURL(file);
26      },
27    }
28  };
29</script>