2017-06-21 75 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功能的形象呢?非常感谢你!

回答

1

我使用v-bind:src时,估计它应该是如下

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

通知的' '

在使用<img src="../assets/logo.svg" />你不需要为字符串绑定,因此,这就是为什么它的工作原理。

+0

hi @flyingSmurfs我试过了,但它给了我一个错误也无法加载资源:服务器响应状态404(未找到)。 – DaLoco

+1

@DaLoco很难指出问题出在哪里,你可以把它放在JSFiddle吗? – highFlyingDodo

+0

你的路径在这里'name:utils.assetsPath('img/[name]。[hash:7]。[ext]''不一样 – highFlyingDodo