侧边栏壁纸
  • 累计撰写 1,975 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录

使用Vue如何引入静态图片

猿哥
2023-03-22 / 0 评论 / 0 点赞 / 1,380 阅读 / 201 字

使用Vue如何引入静态图片

" "

需求描述

在vue中引入图片。

解决方法

在vue中引入图片有两种方式,使用require或者import。

若是需要动态切换则推荐使用require,若只是引入图片必入作为背景不再改变,则推荐使用import。

require

<template>
  <div style="margin:100px">
    <div>
      <img :src="cat" alt="猫咪">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cat: require('@/assets/images/cat.jpg'),
    }
  }
}
</script>

import

  1. import引入图片
  2. data中注册一下引入的图片名称
  3. 模板中直接引用名称
<template>
  <div style="margin:100px">
    <div>
      <img :src="cute" alt="小可爱">
    </div>
  </div>
</template>

<script>
import cute from '../assets/images/cute.jpg'
export default {
  data () {
    return {
      cute
    }
  }
}
</script>

0
博主关闭了所有页面的评论