Vue単一ファイルコンポーネントでイメージをインポートして使用する方法は？

Question

これは単純なはずですが、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 }}"などを使用してみましたがナッシングが動作しているようです。どの例も見つけられませんでした。どんな助け？

Answer 1

のように簡単：

VUEのCLIによって生成されたプロジェクトからの引用

<template> 
    <div id="app"> 
    <img src="./assets/logo.png"> 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

<style lang="scss"> 
</style> 

。

あなたがモジュールとして、あなたの画像を使用したい場合は、あなたの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="scss"> 
</style> 

そして短いバージョンにデータをバインドすることを忘れないでください：あなたがそれらをロードしたい場合は

<template> 
    <div id="app"> 
    <img :src="require('./assets/logo.png')" /> 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

<style lang="scss"> 
</style> 

Answer 2

あなたは単に:src='require('path/to/file')'を使用することができます。:を使用することを忘れないでください。そうしないと、Javascriptとしてrequireステートメントが実行されません。