vue中图片的引用

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>