VueJS - 显示图像的功能

Question

我是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功能显示图像？非常感谢你!

Answer 1

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

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

请注意 ' '

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