vue引入图片的几种方式

Vue引入图片的几种方式

情况1：图片在/public目录下
把图片放到与index.html同级的目录下

方式1
因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片

<!-- 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>

情况2：图片在/src/assets目录下
把图片放到/src/assets目录下

文件层级关系见下图

已知我们在vue中配置@为src的目录

在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。

require()方法是将编写代码时定义的路径转换为编译打包后的路径。

// 在vue组件中定义此变量，组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'
// 在vue组件中定义此变量，组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'
backgroundImgUrl: require('@/assets/login-bg.png')
<img :src="backgroundImgUrl">
<!-- 在style中要把backgroundImgUrl变量拼接到url()中，才能正常引入图片 -->
<div :style="{ backgroundImage: `url(${backgroundImgUrl})` }"></div>

方式2

在vue文件中使用style标签写css样式

<!-- 在div标签上绑定class，以便使用css元素选择器 -->
<div class="login-container"></div>

<style scoped>
.login-container {
    /*
     * 当前vue文件在login文件下，我们梳理一下通过相对路径找到图片文件
     * login ↑ views ↑ src ↓ assets ↓ login-bg.png
     * 于是我们得出如下路径，经过测试可以成功引入图片
     * 这里需要提一下，这里路径是编写代码时的路径，vue在编译打包时会对路径进行处理
     */
    background-image: url('../../assets/login-bg.png');
    
    /*
     * 在vue文件中的style标签内，也可以使用@表示src目录，不过要在前面加~，也就是~@
     * 使用~@后我们就可以快速写出下面的路径了
     */
    background-image: url('~@/assets/login-bg.png');
    
    /* 此行样式：背景图会按比例缩放填充满整个背景（能保证背景图不变形） */
    background-size: cover;
}
</style>