当前位置：首页 > VUE

vue实现html图片

2026-02-19 00:40:05VUE

Vue 实现 HTML 图片的方法

在 Vue 中插入图片可以通过多种方式实现，以下是常见的几种方法：

使用静态资源路径

将图片放在项目的 public 或 assets 目录下，通过相对路径或绝对路径引用：

<template>
  <!-- 使用 public 目录下的图片 -->
  <img src="/images/example.jpg" alt="Example Image">

  <!-- 使用 assets 目录下的图片 -->
  <img :src="require('@/assets/example.jpg')" alt="Example Image">
</template>

使用动态绑定

通过 Vue 的 v-bind 或简写 : 动态绑定图片路径：

vue实现html图片

<template>
  <img :src="imagePath" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      imagePath: require('@/assets/example.jpg')
    }
  }
}
</script>

使用 Base64 编码

对于小图片，可以直接使用 Base64 编码嵌入：

<template>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Base64 Image">
</template>

使用网络图片

直接引用网络图片的 URL：

vue实现html图片

<template>
  <img src="https://example.com/image.jpg" alt="Web Image">
</template>

使用 SVG 内联

对于 SVG 图片，可以直接内联在模板中：

<template>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
</template>

使用 Vue 组件

将图片封装为可复用的组件：

<template>
  <ImageComponent :src="imagePath" alt="Component Image" />
</template>

<script>
import ImageComponent from '@/components/ImageComponent.vue'

export default {
  components: {
    ImageComponent
  },
  data() {
    return {
      imagePath: require('@/assets/example.jpg')
    }
  }
}
</script>