Vueとaxiosで、サーバーから画像を読み込みたい

Question

前提・実現したいこと

Vue.jsを使って、実装はフロントエンドのみのシステムを作っています。
画面でAを選択されたら、Aをの画像。Bを選択されたらBの画像というように
画面から選択された値によって、違う画像をサーバーから読み込みたいです。

以前同じことをjsで試したのですが、下記のようなことをVueではできないのでしょうか。

const image = new Image();
image.src = '../img/sample.png';
image.onload = () => {
// 処理
}

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

GET http://localhost:8081/assets/sample.png 404 (Not Found)

http://localhost:8081/assets/sample.pngにアクセスしましたが、画像はありませんでした。

該当のソースコード

axios
    .get('../assets/sample.png')
    .then(function(response){
        // 処理
    }.bind(this))
    .catch(function(error){
        // 処理
    })

試したこと

１，プロジェクトファイル内のあらゆる場所にファイルを置き、読み込みを試しましたが解決しませんでした。パスの間違い以前の問題のようです。

２，buildをして該当のファイルがdistにあるか確認をしましたが、使いたい画像はありませんでした。

３，同じ.vueのtemplateの中で

<v-img :src="require('../assets/sample.png')" />

をしたところ、画像が表示されました。
この状態でbuildをすると、該当のファイルがdist/imgに存在しました。

ただのjsファイルと違い、Vueはビルドが必要なので、
ビルド後のファイルに含まれるようにしなければならない気はするのですが、
どうすれば含まれるのか、後から読み込むことが出来るのか分からず途方に暮れています。

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

Vueにaxiosについての記載がありましたが、urlがhttp://からでした。
https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
画像ファイルは別のサーバーで用意しなくてはならないでしょうか。

これはJSONなのですが、
https://qiita.com/syui/items/385de29cea208340e65e
相対パスで取得できているように見えます。このようなことがしたいです。

プログラミングやサーバーの知識が不足しています。
わかりにくい表現、間違った語句の使い方をしているかもしれません。
よろしくお願いいたします。