vue img

作者：冰残°零度伤发布日期:2026-03-25 浏览:59

<template>
  <div>
    <!-- 使用 v-bind 绑定 img 的 src 属性 -->
    <img v-bind:src="imageSrc" alt="Vue Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义图片的路径
      imageSrc: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
img {
  width: 100px;
  height: auto;
}
</style>

解释说明：

<template>: 这是 Vue 组件的模板部分，定义了 HTML 结构。这里我们使用了一个 <img> 标签，并通过 v-bind:src 指令动态绑定图片的 src 属性。
<script>: 在这个部分，我们定义了组件的逻辑。data() 函数返回一个对象，其中包含组件的状态数据，这里定义了 imageSrc，用于存储图片的 URL。
<style scoped>: 这里定义了组件的样式，scoped 关键字确保这些样式只应用于当前组件。我们可以根据需要调整图片的宽度和高度。

如果你需要进一步的帮助或有其他问题，请告诉我！

上一篇：vue自定义组件

下一篇：vue router.push 传参数