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 可能在那里有一个字符串。