じゃんけんアプリ Vue.jsを勉強したし取り敢えずアプリを作ってみた。 Part３

目標は相手の手を画像として表示させていく事。

じゃんけんの条件式を検索している中で見かけた記事がありましたのでそこから試すことにしました。

取り敢えず参考にしたコードに似せて,

<script>
if (computer.value === "グー") {
        imgs.value =require("./src/assets/images/~~.png");
      } else if (computer.value === "チョキ") {
        imgs.value = require("./src/assets/images/~~.png");
      } else {
        imgs.value = require("./src/assets/images/~~.png");
      }
</script>

<template>
 <img :src="imgs" alt="logo" class=""/>
</template>

早速エラーが、、、
require（）を入れるとノードの型定義がないと、、、
ノード　型　定義　わからん笑

沼から抜けれなくなる前に方向性を変えます。

次は、連想配列を試したのですがさらに沼リマス( ͡° ͜ʖ ͡°)( ͡° ͜ʖ ͡°)

さらに検索をしていく中で閃いたのがrequire（）いらなくねっ(｀・∀・´)
早速試してみることに。

<script>
 if (computer.value === "グー") {
        imgs.value = "Gu";
      } else if (computer.value === "チョキ") {
        imgs.value = "choki";
      } else {
        imgs.value = "Pa";
      }
</script>
<template>
<img
      :src="`../assets/images/${imgs}.png`"
      alt="logo"
      class=""
    />
</template>

これもダメ、、、、

ただコンソールを確認すると、データは格納されてる！
エラーを見たら４０４番
もしやと思いルートを変更してみると、、、

<template>
<img
      :src="`./src/assets/images/${imgs}.png`"
      alt="logo"
      class=""
    />
</template>

できました笑
なんてとこで躓いてるんだ、、、

ただこの知恵の輪を解いた感じがたまらなく好きな自分がいます( ・∇・)

色々な記事を見過ぎて混乱したのか基礎が出来てないから沼にハマったのか、、、
出来たからいっかで解決していいものか、、、、、、

取り敢えずいい感じに動作してるので目的達成です笑

あとは見た目を整えて完成させていこうと思います！！！