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!

highFlyingSmurfs · Accepted Answer · 2017-06-21 06:44:54Z

12

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.

answered Jun 21, 2017 at 6:44

highFlyingSmurfs

3,0492 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DaLoco Over a year ago

hi @flyingSmurfs i have tried it but it gave me an error also Failed to load resource: the server responded with a status of 404 (Not Found).

highFlyingSmurfs Over a year ago

@DaLoco hard to point out where's the issue, can you put it up JSFiddle?

highFlyingSmurfs Over a year ago

your path here ` name: utils.assetsPath('img/[name].[hash:7].[ext]'` is not the same

DaLoco Over a year ago

shoud I change it to name: utils.assetsPath('assets/[name].[hash:7].[ext] ?

DaLoco Over a year ago

thank you! i just added the file-loader and it loaded already

|

Collectives™ on Stack Overflow

VueJS - Function to display image

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related