VueJS - Function to display image

Question

I'm new to VueJS and having a hard to on this situation.

display.vue

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

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

I got an 404 error on that code.

But I tried not using the getLogo() function and it displayed.

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

The image structure is:

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

Anybody here can help me displaying the image by using the getLogo function? Thank you very much!

Answer 1

I reckon when using v-bind:src it should be as follows

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

Notice the ' '

While using <img src="../assets/logo.svg" /> you do not need to bind a string, hence that's why it works.