vue.js - 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" /> 时您不需要绑定(bind)字符串，因此这就是它起作用的原因。