vue图片

作者：月冷清发布日期:2026-02-22 浏览:67

<template>
  <div>
    <!-- 使用 img 标签展示图片 -->
    <img :src="imageSrc" alt="Vue Logo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片的 URL 地址
      imageSrc: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

<style scoped>
/* 添加一些样式让图片居中显示 */
img {
  display: block;
  margin: 0 auto;
  width: 200px;
}
</style>

解释说明：

<template> 部分：使用了 HTML 的 img 标签来展示图片，src 属性通过 Vue 的绑定语法 (v-bind) 绑定到 data 中的 imageSrc。
<script> 部分：定义了一个 Vue 组件，data 函数返回一个对象，其中包含图片的 URL 地址 imageSrc。
<style scoped> 部分：为图片添加了一些简单的样式，使其在页面中居中显示，并设置了宽度。

上一篇：vue nginx部署

下一篇：vue路由配置