Vue练习5:图片的引入

后续会补充

1.require引入

src -> asstes

javascript 复制代码
<template>
  <img :src="url">
</template>

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

2.import引入

src -> asstes

javascript 复制代码
<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

javascript 复制代码
<template>
  <img :src="url">
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      url: "img/logo.png",
    }
  }
}
</script>
相关推荐
啃火龙果的兔子3 分钟前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 分钟前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪9 分钟前
函数组件和异步组件
前端·javascript·面试
淮北49422 分钟前
html + css +js
开发语言·前端·javascript·css·html
麦麦大数据23 分钟前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
你的人类朋友24 分钟前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei35 分钟前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下1 小时前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔1 小时前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端
技术钱1 小时前
vue3前端解析excel文件
前端·vue.js·excel