一、图片放在/public目录下


<!-- img标签引入图片:图片名称,这种属于相对路径,在index.html的同级目录下查找此图片 -->

<img src="login-bg.png">

<!-- img标签引入图片:'/' + 图片名称,这种属于绝对路径,/表示编译后的dist文件夹 -->

<img src="/login-bg.png">

<!-- style样式引入图片时,需要用url来处理图片路径,url内部写法和img的src相同 -->

<div style="background-image: url('login-bg.png');"></div>

<div style="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样式中引用

<div class="img-class"></div>

<style scoped>
.img-class {
	background-image: url('~@/assets/img/img.png')
}
</style>
Logo

前往低代码交流专区

更多推荐