Blockchain code Metaverse VR

Crypto×VR×SmartContract(558)

スポンサーリンク

//tips

//smart contract

Storageからリンクを取得してdatabaseに新規登録することができた。

更新することもできている。ただ、storagelinkを追っていくと、databaseに2つのドキュメントが追加されている。

何度か実験すると無事に機能していることを確認できた。

これでeditでの画像登録時または更新時にstorageだけでなくデータベースにまでnftimageのパスを格納することができた。

各idのeditページにてimageの登録をして回る。id3,id3は意図的に何も登録せずに様子を見る。

その後に[id]ページのnft表示をstoragelinkからのものに変更。

pile.storagelink = data.storagelink?data.storagelink:null

if(Item.storagelink !=null||Item.storagelink !=undefined){

if(storagelink==undefined||storagelink==null||storagelink==''){
setstoragelink(Item.storagelink)
setstoragelinkdocid(Item.docid)
}
}

const [storagelink, setstoragelink] = useState('')
const [storagelinkdocid, setstoragelinkdocid] = useState('')

画像表示部分を下記に変更。

{storagelink &&
<div>
<img src={storagelink} alt="" width="250" height="250" onClick={handleClickNFTImage}/>
</div>

これによりimageの設定などは必要無くなったのでeditおよび[id]で下記などはコメントアウト。

getDownloadURL(gsReference)
// .then(url => {
// setImage(url)

http://localhost:3000/IDに戻り、storagelinkのurlの中身が表示されているかを確認。

Id3のようにstoragelinkがない場合にはpublicに保存しておいたimageを代わりに表示してあげる。

Nftimageがない人用に"/noimage.jpg”を表示させるようにしたら取得ドキュメントの数が多いため大量のnoimage.jpgが表示されてしまった。各useridに対して一つのみ表示されるなどする必要があるか。

{ninja.map((item,index) => (
<div key={index}>
{item.storagelink ?
<Grid item xs={12} md={6} lg={4} key={index}>
<img src={item.storagelink} alt="" width="100" height="100" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
:
<Grid item xs={12} md={6} lg={4} key={index}>
<img src="/noimage.jpg" alt="" width="100" height="100" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
}
</div>
))}

こちらは実験で実施したため一旦もとに戻す。[id],editページの方にはこの方法で表示してしまって良いかもしれない。

{storagelink ?
<div>
<img src={storagelink} alt="" width="250" height="250" onClick={handleClickNFTImage}/>
</div>
:
<div>
<img src="/noimage.jpg" alt="" width="200" height="250" onClick={handleClickNFTImage}/>
</div>
}

こちらで問題なく対応できた。

http://localhost:3000/IDでのnftimageの並べ方が縦一列になっているのである程度デバイスの大きさを勘案しながら縦横に等間隔に並べていく。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.