Vue 显示图片的两种常用方法 - 附代码示例

Vue 中显示图片的两种常用方法

在 Vue.js 中，你可以使用以下两种方法来显示图片：

1. 使用 img 标签

这是最常见和推荐的方法。你可以使用 img 标签，并将其 src 属性绑定到图片的 URL 地址。

<template>
  <div>
    <img :src='imageUrl' alt='图片'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

2. 使用 background-image 样式

你也可以使用 background-image 样式来显示图片。

<template>
  <div :style='{ backgroundImage: `url(${imageUrl})` }'></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

选择哪种方法？

• 如果图片是页面内容的一部分，例如文章中的插图，建议使用 img 标签。
• 如果图片是作为背景显示的，例如页眉或部分的背景图片，则可以使用 background-image 样式。

希望这些信息能帮助你在 Vue.js 中轻松显示图片！