vue 图片

作者：战神再世发布日期:2025-04-13 浏览:113

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

<script>
export default {
  data() {
    return {
      // 图片的 URL 地址
      imageSrc: 'https://example.com/vue-logo.png'
    };
  }
};
</script>

<style scoped>
/* 可以添加一些样式来调整图片的显示效果 */
img {
  width: 200px;
  height: auto;
}
</style>

解释说明：

<template> 部分：使用了 Vue 的 v-bind 指令（简写为 :）来动态绑定图片的 src 属性。这样可以方便地在 JavaScript 中管理图片的路径。
<script> 部分：定义了一个 data 函数，返回一个对象，其中包含图片的 URL 地址 (imageSrc)。这个 URL 可以是本地资源或网络资源。
<style scoped> 部分：为图片添加了一些简单的样式，确保图片宽度为 200px，并保持其宽高比不变。

通过这种方式，你可以轻松地在 Vue 组件中动态加载和显示图片。

上一篇：vue minxin

下一篇：vue 字符串转对象