[解決済み] Vueの単一ファイルコンポーネントで画像をインポートして使用するには？

質問

Vueのシングルファイルコンポーネントで画像をインポートして使用する方法について、簡単なはずなのですが、いくつかの問題に直面しています。誰かがこれを行う方法について私を助けることができますか？ここに私のコードスニペットがあります。

<template lang="html">
    <img src="zapierLogo" />
</template>
    
<script>
    import zapierLogo from 'images/zapier_logo.svg'
    
    export default {
    }
</script>
    
<style lang="css">
</style>

を使ってみました。 :src , src="{{ zapierLogo }}" など。しかし、何も動作しないようです。例も見つけることができませんでした。何か助けはありますか？

どのように解決するのですか？

というように簡単です。

<template>
    <div id="app">
        <img src="./assets/logo.png">
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style> 

vue cliで生成されたプロジェクトから引用しています。

画像をモジュールとして使用したい場合は、Vuejsのコンポーネントにデータをバインドすることを忘れないでください。

<template>
    <div id="app">
        <img :src="image"/>
    </div>
</template>
    
<script>
    import image from "./assets/logo.png"
    
    export default {
        data: function () {
            return {
                image: image
            }
        }
    }
</script>
    
<style lang="css">
</style>

さらに短いバージョンも

<template>
    <div id="app">
        <img :src="require('./assets/logo.png')"/>
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style>