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>
相关推荐
宋军涛几秒前
重操旧业,继续码农生活,温故vue moment类库和new Date()
vue.js·生活
霍理迪10 分钟前
HTML初相识
前端·html
恋猫de小郭28 分钟前
Android 宣布 Runtime 编译速度史诗级提升:在编译时间上优化了 18%
android·前端·flutter
莓莓儿~30 分钟前
Next.js 14 App Router数据获取开发手册
开发语言·前端·javascript
文心快码BaiduComate36 分钟前
AI Coding老跑偏?用Comate Rules功能,少走十年弯路!
前端·架构·前端框架
PineappleCoder42 分钟前
WebP/AVIF 有多香?比 JPEG 小 30%,<picture>标签完美解决兼容性
前端·面试·性能优化
Kaze_story43 分钟前
Vue第五章(1):scoped、组件通信
前端·javascript·vue.js
hayzone44 分钟前
Git 配置与使用全攻略(含工作流对比与 AI 协作)
前端
匠心网络科技1 小时前
前端框架-Vue为何开发更高效?
前端·javascript·vue.js·前端框架
哆啦A梦15881 小时前
商城后台管理系统 02 添加规格参数-动态表单
javascript·vue.js·elementui