vue中引入图片的方法

一、图片放在/public目录下

<!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --><imgsrc="login-bg.png"><!-- img标签引入图片：'/' + 图片名称，这种属于绝对路径，/表示编译后的dist文件夹 --><imgsrc="/login-bg.png"><!-- style样式引入图片时，需要用url来处理图片路径，url内部写法和img的src相同 --><divstyle="background-image:url('login-bg.png');"></div><divstyle="background-image:url('/login-bg.png');"></div>

二、图片在/src/assets目录下

此时需要使用相对路径来引用
我们先看一下@是否配置为了src目录，查看vue.config.js

configureWebpack:{resolve:{alias:{'@':resolve('src'),},}}

方法1：在vue中设置一个变量来引入

data(){img:require('@/assets/images/img.jpg')}

然后直接在img中使用

<img:src="img">

方法2：在css样式中引用

<divclass="img-class"></div><stylescoped>.img-class{background-image:url('~@/assets/img/img.png')}</style>