vue本地图片的引用,vue引用图片背景

vue本地图片的引用,vue引用图片背景

vue 项目中引入图片引入效果图：背景：恍恍惚惚的整了好长时间，我借助vant-ui组件去实现的这个效果图，空状态自定义组件，这里呢！需要引入图片，考虑到图片的引入，切记，图片不可直接引在vue.config.js中配置publicPath路径：//vue.config.js module.exports= { publicPath:'/foo/', } 结论静态资源可以通过两种方式进行处理：在JavaScript

一、img标签引用图片1.静态绑定src属性2.动态绑定src属性，将图片路径放在Vue的data中exportdefault{ name:'userClustering', components: {}, data() { r1、静态引用图片像logo、等一些不变的图片，通常直接是直接写s的1.1、图片在assets下创建webpack项目时会生成/src/assets 如果图片在该文件下，可以通过此方式引用(直接引用路径):

在vue项目中动态的引用本地图片这是一般写法，但是只能引用相对路径下的图片如果引用的是本地绝对路径的图片，一般需要使用require()方式，当然require()也适Vue引入图片的几种方式情况1:图片在/public目录下把图片放到与index.html同级的目录下方式1 因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目录下，相当于在

一、本地(一般调用有三种办法) //方法1.直接将图片引入为模块requireimgUrlfrom"../assets/test.png" //方法2.将imgUrl放在数据里data(){ return{ imgUrl:一、首先我们在img 当中引用 记住这里是：src 里面的是我数据给传递过来的数据二、设置数据data() exportdefault{data(){return{arr:[{url:require("../im

ˋ▽ˊ vue中图相对路径引用本地图片 import imgUrl from'@/assets/img/duihao.png'exportdefault{ data(){return{ imgUrl } } } background:1 vue在项目中引入本地图片时，可以把图片放在static目录下，但是cli3版本以上不再有static目录，而是需要把本地图片放到src/assent下面2 写法中，一般我们会用到图片的相对路径，