Vue练习5:图片的引入

后续会补充

1.require引入        

        src  ->  asstes

<template>
  <img :src="url">
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      url: require("./assets/logo.png"),
    }
  }
}
</script>

2.import引入

        src -> asstes

<template>
  <img :src="url">
</template>

<script>
import URL from "./assets/logo.png";
export default {
  name: 'App',
  data(){
    return{
      url: URL,
    }
  }
}
</script>

3.public引入

        public -> img

<template>
  <img :src="url">
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      url: "img/logo.png",
    }
  }
}
</script>

相关推荐

  1. Vue练习5图片引入

    2024-02-22 07:18:01       45 阅读
  2. vue中动态引入图片地址需要用require

    2024-02-22 07:18:01       31 阅读
  3. python项目练习——5.自动化批量重命名图片文件

    2024-02-22 07:18:01       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-22 07:18:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-22 07:18:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-22 07:18:01       87 阅读
  4. Python语言-面向对象

    2024-02-22 07:18:01       96 阅读

热门阅读

  1. uniapp微信公众号H5分享

    2024-02-22 07:18:01       47 阅读
  2. 【算法】复杂度分析

    2024-02-22 07:18:01       47 阅读
  3. vue中nextTick使用以及原理

    2024-02-22 07:18:01       52 阅读
  4. 关于/proc/fs/lustre

    2024-02-22 07:18:01       45 阅读
  5. ubuntu22.04使用阿里云Docker镜像源安装Docker

    2024-02-22 07:18:01       49 阅读
  6. Ubuntu22.04安装PostgreSQL

    2024-02-22 07:18:01       50 阅读
  7. SpringBoot + Thymeleaf打造VIP视频源解析网站

    2024-02-22 07:18:01       49 阅读
  8. PDF加粗内容重复读取解决方案

    2024-02-22 07:18:01       49 阅读
  9. iOS面试:1.计算机网络

    2024-02-22 07:18:01       37 阅读
  10. android放松眼睛提醒功能

    2024-02-22 07:18:01       60 阅读