vue引入图片的三种方式与背景图引入

*初级小白*~

于 2021-11-14 01:31:53 发布

阅读量5.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/121313192

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了在Vue.js项目中如何引入图片的三种常见方法，包括静态资源引用、require语法以及URL-loader结合file-loader的使用。同时，文章还探讨了如何将图片作为背景图设置在元素上，提供了具体的CSS样式示例。对于前端开发者在Vue项目中处理图片资源具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <img :src="imgSrc1" alt="">
    <img :src="imgSrc2" alt="">

    <section :style="{backgroundImage: 'url('+imgSrc2+')'}"></section>
    <section :style="{backgroundImage: 'url('+imgSrc1+')'}"></section>
  </div>
</template>

<script>
import imgSrc from './assets/logo.png'
  export default {
    name:'App',
    data() {
      return {
        imgSrc1: require('../src/assets/logo.png'),
        imgSrc2:imgSrc
      }
    },
  }
</script>

<style lang="scss" scoped>
  section{
    width: 200px;
    height: 200px;
    background-color: gray;
  }
</style>

在这里插入图片描述