vue中图片的引用
首先需要知道图片放在哪里
- public、static 资源不会被打包
- src/assets 资源会被打包
引入图片主要有三种方式,以assets为例
<!-- 方式一 -->
<!-- 直接用img标签引用 -->
<img src="@/assets/img/1.jpg" alt="">
<!-- 方式二 -->
<template>
<!-- 用类名引用 -->
<div class="picimg"></div>
</template>
<style scoped>
.picimg {
background: url('@/assets/img/1.jpg') no-repeat;
background-size: 100% 100%;
}
</style>
<!-- 方式三 -->
<!-- 用行内样式 -->
<div style="background: url('@/assets/img/1.jpg') no-repeat; background-size: 100% 100%;"></div>
<!-- 方式三拓展 -->
<!-- 用行内样式 -->
<div :style="backgroundImg"></div>
<script>
export default {
data() {
return {
// 如果直接这么写不会被webpack打包
backgroundImg: 'background:url(@/assets/img/1.jpg)'
// 要写require
backgroundImg: `background:url(${require('@/assets/img/1.jpg')})`
}
}
}
</script>