vueでrequire()を使うとエラーが起きて動かなくなってしまった。

はじめに

vueでconponentを作成しpropsを使って画像のpathを渡そうと思ったがうまく表示させる事ができなかった。
色々試してみて解決方法と原因がわかったので同じ現象に合った方は試してみてください。

環境

• M1 mac book
• vite
• vue3
• nuxt3

試してみた事①

require()を使う。

propsで画像のpathを渡したい時などはrequire()を使えばいいと記事では多くみた。

• 親コンポーネント

  <script setup lang="ts">
    import srcImg from "画像path"
  </script>
  <template>
    <component/ :srcImg="srcImg">
  </template>
  

• 子コンポーネント

  <script setup lang="ts">
    const props = defineProps({
      srcImg : String,
    })
  </script>
  
  <template>
    <div>
      <img :src="srcImg" alt="画像">
    </div>
  </template>
  

この方法が一番多く記事としてあったが自分の環境ではうまく表示する事ができなかった

試してみた事②

importを使って画像のpathを読み込む

自分の環境ではviteを使って開発しています。
どうやらviteを使っているとrequire()を使う事ができないらしい。
（原因はここだった）

この方法を使ってうまく表示する事ができました。

• 親コンポーネント

  <script setup lang="ts">
    import srcImg from "画像path"
  </script>
  <template>
    <component/ :srcImg="srcImg" >
  </template>
  

• 子コンポーネント

  <script setup lang="ts">
    const props = defineProps({
      srcImg : String,
    })
  </script>
  
  <template>
    <div>
      <img :src="srcImg" alt="画像">
    </div>
  </template>
  

まとめ

一度viteを使ってしまうとvue-cliには戻れる気はしないので解決できてよかったです。