Vue引入静态图片的两种方式

1.require形式引入

<template><div style="margin:100px"><div><img :src="cat"         // 图片srcalt="猫咪"></div></div>
</template>
<script>
export default {data () {return {cat: require('../assets/images/cat.jpg'),   // require转换一下图片地址}}
}
</script>

2.import形式引入

import引入图片
data中注册一下引入的图片名称
模板中直接引用名称

<template><div style="margin:100px"><div><img :src="cute"                  // img地址alt="小可爱"></div></div>
</template>
<script>
import cute from '../assets/images/cute.jpg'   // import引入
export default {data () {return {cute             // data中注册图片}}
}
</script>

图片存放及组件目录

Vue引入静态图片的两种方式相关推荐

vue 引入项目图片的几种方式
1.data(){}中引入图片 {icon: require('@/assets/images/modules-a5.png'),text: '图片',type: 'ui-picture' } 或者 ...
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
设置背景图片的两种方式,并解决手机端背景图片高度自适应问题参考文章: (1)设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 (2)https://www.cnblogs.com/Dark ...
ImGui添加背景图片的两种方式
给ImGui添加背景图片的两种方式最近在使用ImGui做客户端程序,想给窗口添加背景图片,但是作者的文档里面好像并没有讲如何添加背景图片,研究了下找到了两种方式. 第一种创建一个和窗口一样大的Im ...
Android加载GIF图片的两种方式
飞哥语录:得到一件东西最好的方式是让自己配得上它. 方式一:使用第三开源框架直接在布局文件中加载gif 1.在工程的build.gradle中添加如下 buildscript {repositorie ...
Vue中引入静态资源的几种方式
最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下: 在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看 ...
Vue实现动态路由的两种方式总结
实现动态路由有两种方式,一种是后端返回什么,前端就展示什么,另一种是后端只返回角色,前端根据角色拼接数据信息展示.相比第一种方式,第二种方式在企业中更常用. 第一种方式: (一)后端需返回类似Vue- ...
Android之从网络上获取图片的两种方式讲解：thread+handle和AsyncTask方式
从网络上获取图片是一个比较耗时的操作,放在主线程会导致阻塞主线程,响应超时,所以我们不能把它放在主线程里操作,必须放在一个子线程里,我打算采用两种方式去实现.1.采用thread去获取图片,获取到后通 ...
jsp引入其它页面的两种方式
熟悉jsp的知道,有两种include其他页面的方法,一种是说明标签<%@ include file="xxx.jsp"%>,一种是动作标签<jsp:includ ...
vue路由传参的两种方式
项目场景: 例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用跳转方式一般我们有两种方式让路由携带参数 1.路由传参query(path是路由地 ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...

Vue引入静态图片的两种方式

1.require形式引入

2.import形式引入

图片存放及组件目录

Vue引入静态图片的两种方式相关推荐

最新文章

热门文章