2017-06-21 14 views
1

私はVueJSに新たなんだと、このような状況でのハードを持っを表示します。VueJS - 機能画像

display.vue

<template> 
    <img :src="getLogo(logo)" /> 
</template> 

<script> 
export default { 
    methods: { 
    getLogo(logo){ 
     return '../assets/'+logo; 
    } 
    } 
} 
</script> 

私は、そのコードに404エラーを得ました。

しかし、私はgetLogo()機能を使用しない試み、それが表示。

<template> 
    <img src="../assets/logo.svg" /> 
</template> 

画像構造は次のとおりです。ここ

src/assets/logo1.svg 

webpack.base.conf.js

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
loader: 'url-loader', 
options: { 
limit: 10000, 
name: utils.assetsPath('img/[name].[hash:7].[ext]') 
} 

誰もがgetLogo機能を使って、画像を表示する私を助けることができますか?どうもありがとうございました!私はv-bind:srcを使用しているとき<img src="../assets/logo.svg" />を使用している間

<img v-bind:src="'../assets/logo.svg'"> 
<!-- or shorthand --> 
<img :src="'../assets/logo.svg'"> 

お知らせ' '

を次のようにそれがあるべき数える

答えて

1

あなたはので、それが動作する理由です、文字列をバインドする必要はありません。私はそれを試してみましたが、それは私にエラーを与えた

+0

HI @flyingSmurfsは、リソースの読み込みに失敗しました:サーバーは、404の状態(見つかりません)と答えました。 – DaLoco

+1

問題は、あなたがJSFiddleそれをどこに置くことができます指摘して@DaLoco難しいですか? – highFlyingDodo

+0

ここにあなたのパス '名前:utils.assetsPath( 'IMG/[名] [ハッシュ:7]。[EXT]'' – highFlyingDodo

関連する問題