图片引入的几种方式

最新推荐文章于 2024-08-08 19:56:31 发布

A-sleep

最新推荐文章于 2024-08-08 19:56:31 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/FellAsleep/article/details/125766225

版权

Vue 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

本文详细介绍了在Vue项目中引入图片的三种常见方法：直接使用img标签，通过绑定src属性和使用import导入。每种方法都配合代码示例进行解释，并展示了如何将图片作为背景图使用，帮助开发者更好地理解和应用Vue中的资源引入。

摘要由CSDN通过智能技术生成

1.直接引入

<img alt="Vue logo" src="../assets/logo.png" >

2.通过绑定的形式引入

<div>
<img :src="imgSrc" alt="">
</div>
 
<script>
export default {
  data () {
    return {
      imgSrc: require('../assets/logo.png')
    }
  }
}
</script>

3.通过import引入

<div>
 <img :src="imgSrc1" alt="">
</div>
 
<script>
import imgSrc from '../assets/logo.png'
export default {
  data () {
    return {
       imgSrc1: imgSrc
    }
  }
}
</script>

4.作为背景图时引入


<div>
<div class="div1" :style="{backgroundImage: 'url('+imgSrc1+')'}"></div>
</div>
 
<script>
import imgSrc from '../assets/logo.png'
export default {
  data () {
    return {
      imgSrc1: imgSrc
    }
  }
}
</script>
 
<style scoped>
.div1{
  width: 400px;
  height: 400px;
  background-color: rgb(76, 175, 175);
}
</style>