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>
相关推荐
夜郎king8 分钟前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳16 分钟前
JavaScript 的宏任务和微任务
javascript
跳动的梦想家h1 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring
夏幻灵1 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星1 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_1 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝1 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions2 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发2 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_2 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html