Vue：绑定img src不起作用，但对其进行硬编码

Question

当我绑定我的图片源时，找不到图片

<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>

我收到错误消息：offer_pizza.jpg:1 GET http://localhost:3000/@/assets/images/offer_pizza.jpg 404 (Not Found)

console.log打印出正确的路径：@/assets/images/offer_pizza.jpg

但是，当我像这样对它进行硬编码时：

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

它工作正常。

Answer 1

如果要像以前一样使用它，则offer对象必须看起来像这样：

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

您当前的offer可能有一个字符串。