Vue: binding img src doesn't work but hardcoding it works

Question

When Im binding my image source it can't find the image

<template>
 <div class="card">
    <img class="card-img-top" :src="this.offer.resource">
    <div class="card-body text-center">

        <h1>{{offer.name}}</h1>
        <p>{{offer.description}}</p>
        <h2>{{offer.price}}€</h2>
    </div>
</div>
</template>

<script>

import Offer from '@/models/Offer.js'

export default {

    props: { offer: Offer},
    created: function() {
        console.log(this.offer.resource);

    }
}

</script>

I get the error: offer_pizza.jpg:1 GET http://localhost:3000/@/assets/images/offer_pizza.jpg 404 (Not Found)

the console.logprints out the correct path: @/assets/images/offer_pizza.jpg

Howerever when I just hardcode it like this:

<img class="card-img-top" src="@/assets/images/offer_pizza.jpg" >

it works fine.

not familiar with vue, but it looks you have problem with relative-absolute path. Check your network tab, you should see requested resources in both cases. Most probably, you request `http://localhost:3000/@/assets/images/offer_pizza.jpg` and `http://localhost:3000/somehting-here/@/assets/images/offer_pizza.jpg` — degr, Aug 14 '18 at 12:33
can you share for us your controller method that returns picture data, please ? — Thamer, Aug 14 '18 at 12:42

score 1 · Accepted Answer · answered Aug 14 '18 at 12:48

1

If you want to use it the way you did, your offer object would have to look like this:

offer: {
  ...
  resource: require('@/assets/images/offer_pizza.jpg')
}

Your current offer probably has a string there.

answered Aug 14 '18 at 12:48

dziraf

3,607
1
16
22

Thank you that works! could you explain what require() does? – Jonas Aug 14 '18 at 12:54
This might help you: https://stackoverflow.com/questions/9901082/what-is-this-javascript-require – dziraf Aug 14 '18 at 13:10

Vue: binding img src doesn't work but hardcoding it works

1 Answers1