有没有办法在vue中引用图片？

Question

我正在使用 vue.js 构建 SPA，我需要分配一个 div 背景图像引用以下路径中的内容：

我正在尝试引用 src/assets/img/firstCard.jpg 但由于某种原因它没有显示图像，这就是我绑定图像的方式：

HTML:

 <a class="card">
    <div
      class="card__background"
      v-bind:style="secondCard">
    </div>
    <div class="card__content">
      <p class="card__category">Gratuita</p>
      <h3 class="card__heading">Ademas en diferentes plataformas.</h3>
    </div>
  </a>

JS:

<script>
export default {
  data () {
    return {
      thirdCard: {
        'background-image': require('@/assets/img/firstCard.jpg')
      },
      secondCard: {
        'background-image': require('@/assets/img/firstCard.jpg')
      },
      firstard: {
        'background-image': require('@/assets/img/firstCard.jpg')
      }
    }
  }
}
</script>

谢谢大家的宝贵时间。

Answer 1

你可以试试 make method 或者 computed 属性:

getUrl (img)  {
  return require(`@/assets/img/${img}.jpg`);
}

然后在数据对象中调用该方法（对于背景图像，您需要指定 url）：

data () {
  return {
    firstCard: {
      'background-image': `url(${this.getUrl('firstCard')})`
    } 
  }
},

有没有办法在vue中引用图片？

Is there a way to reference the images in vue?

node.js

single-page-application

vue.js

vuejs3