はじめに

Node.js,Vue.js,Vuetifyの環境を例に手順を記載します。
使用する言語により開発環境にインストールするパッケージや、Dockerのイメージは変更してください。

事前準備

Docker desktopをインストールしておく
VSCodeにRemote-Containers Pluginを入れておく

Windowsのファイルシステムにコンテンツおいて、コンテナで参照すると速度がかなり遅くなるらしいです。WSL2内にファイルを置いた方よいそうです。
このため、WSL2も使えるようにして、います。

手順

1. ソースを作成するフォルダを作成 work/vuetify01
2. VSCodeでこのフォルダを開く

3. Ctrl+Shift P でコマンドパレットを開いて、Add Development Container Cinfiguration Filesを開く
   

4. Show All Definitionsを選択
   

5. コンテナを選ぶ。今回はNode.js & TypeScriptにしてみます。
   

6. バージョンを選択
   

7. devcontainer.jsonファイルに"postCreateCommand": "yarn global add @vue/cli && yarn install",を追加
   こんな感じ
   

8. コマンドパレットで、Rebuild and Reopen in Containerを実行
   
   VSCodeが再起動して、Containerが起動し接続した状態になります。
   ターミナルを開くと、コマンドプロンプトがコンテナ内になっていることが分かります。nodeも使える状態になっています。
   

9. vueプロジェクトの作成や、追加パッケージのインストール

$ cd ..
$ vue create vuetify01
$ cd vuetify01/
$ yarn serve
$ vue add vuetify

以上

ディレクトリ

app
　├ assets
　|   L images
　|       L image1.jpg
　└ javascripts
        L components
             L TopImage.vue ←ここからimage1.jpg表示したい

今回はv-bindを使用。

＃TopImage.vue

<template>
  <div id="app">
    <img :src="topImage">
  </div>
</template>

<script>
export default {
  el: 'app',
  data: function () {
    return {
      topImage: require('../../assets/images/image1.jpg')
    }
  }
}
</script>

*requireを使うことで表示できた
*ディレクトリの構造がややこしいので注意