vue引入图片的方式

1.import方式导入（我是根据相对路径导入）

import img from '../../../assets/img/img.png'

2.在数据里边定义该图片（vue3中使用setup，vue2在data里定义直接return出去）

2.1import方式导入的定义方法（以vue3为例）

 setup() {const state = reactive({img4: img4,})return {...toRefs(state),}},

2.2require方式直接在定义里边导入（以vue2为例）

data() {return {img: require("../../../assets/img/img.png")}
}

3.在模板内使用

<template><img class="img" :src="img" alt="" />
</template>

vue引入图片的方式相关推荐

vue html引入图片,vue引入图片的几种方式
情况1:图片在/public目录下把图片放到与index.html同级的目录下情况1-1.png 方式1 因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目 ...
vue引入图片路径的三种主要方法
1.在js代码里面或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用 require('@/assets/home/imgName.png ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
vue样式引入图片_Vue引入图片的几种方式
情况1:图片在/public目录下把图片放到与index.html同级的目录下方式1 因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目录下,相当于在ind ...
vue 引入项目图片的几种方式
1.data(){}中引入图片 {icon: require('@/assets/images/modules-a5.png'),text: '图片',type: 'ui-picture' } 或者 ...
最近在使用vue的时候，发现竟然不会引入图片，悲哀啊，于是乎。。。
最近在使用vue的时候,发现竟然不会引入图片,悲哀啊,于是乎... 于是乎就狠狠地学习了一遍, 接下来我们来看看,图片引入无非是路径问题,路径就会有绝对路径,和相对路径这两个说法, 有一种引入方式就是 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
[react] 在React中如何引入图片？哪种方式更好？
[react] 在React中如何引入图片?哪种方式更好? 第一种导入: import Img from "./images/1.png" 第二种直接获取图片: <img s ...
Vue引入并使用Element-UI组件库的两种方式
前言在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中 ...

vue引入图片的方式

vue引入图片的方式相关推荐

最新文章

热门文章