vue 引入图片

作者：资本principal 发布日期:2025-04-27 浏览:67

<template>
  <div>
    <!-- 使用绑定的 src 属性引入图片 -->
    <img :src="imagePath" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片路径可以是相对路径、绝对路径或 require 引入的方式
      imagePath: require('@/assets/example.png') // 使用 require 引入图片
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

模板部分 (<template>):
- 使用了 <img> 标签，并通过 v-bind 指令 (:) 绑定 src 属性到 imagePath 数据属性。
脚本部分 (<script>):
- 在 data 函数中定义了一个 imagePath 变量，该变量使用 require 方法引入图片。@/assets/example.png 是一个相对路径，指向项目中的图片资源。
样式部分 (<style scoped>):
- 样式部分可以根据实际需求进行自定义，这里只是一个占位符。

这种方式确保了在构建时正确处理图片资源路径，并且可以在开发和生产环境中正常工作。

上一篇：vue 生成uuid

下一篇：vue+electron