vue 图片引入

<template>
  <div>
    <!-- 直接写入项目路径 -->
    <img src="@/assets/img/logo.png">

    <!-- 直接写入外部路径 -->
    <img src="https://cn.vuejs.org/images/logo.png">

    <!-- import 引入data赋值 -->
    <img :src="logoImg">

    <!-- require 引入data赋值 -->
    <img :src="logoImg1">

    <!-- 外部链接 data赋值 -->
    <img :src="logoImg2">
  </div>
</template>

<script>
import logo from '@/assets/img/logo.png'

export default {
  data() {
    return {
      // import 引入
      logoImg: logo,
      // require 引入
      logoImg1: require('@/assets/img/logo.png'),
      // 外部链接
      logoImg2: 'https://cn.vuejs.org/images/logo.png'
    }
  }
}
</script>
<style>

</style>

<script>

 

上一篇:SpringBoot-整合-MyCat-实现读写分离,mongodb视频教程


下一篇:Google插件开发——-这是一个能撩妹的插件(web)