2017-06-21 8 views
1

Ich bin neu in VueJS und habe eine schwierige Situation.VueJS - Funktion zum Anzeigen des Bildes

display.vue

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

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

Ich habe einen 404-Fehler auf diesem Code.

Aber ich habe versucht, nicht mit der getLogo() Funktion und es angezeigt.

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

Die Bildstruktur ist:

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]') 
} 

Jeder hier kann mir das Bild angezeigt wird helfen, indem sie die getLogo-Funktion? Vielen Dank!

Antwort

1

Ich rechne damit, wenn v-bind:src mit es sein sollte wie folgt

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

Hinweis der ' '

Während <img src="../assets/logo.svg" /> verwenden Sie keine Zeichenfolge binden müssen, damit das ist, warum es funktioniert.

+0

hi @flyingSmurfs ich habe es versucht, aber es gab mir einen Fehler auch Fehler beim Laden der Ressource: Der Server antwortete mit einem Status von 404 (nicht gefunden). – DaLoco

+1

@DaLoco schwer zu zeigen, wo das Problem ist, können Sie es JSFiddle? – highFlyingDodo

+0

Ihr Pfad hier 'name: utils.assetsPath ('img/[name]. [Hash: 7]. [Ext]'' ist nicht das gleiche – highFlyingDodo

Verwandte Themen