Vue系列:页面中图片等静态资源引用

前言

近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用,在vue页面jsx、tsx中使用的时候遇到些问题;
对静态资源的引用使用总结如下

引入方式说明

以下代码实例以图片、vue环境为例,不放视屏等引入实例,视频使用方式举一反三,套用即可;

1.第一种方式:直接引入

img标签为例,代码如下

//vue文件层级位置变化需要重新引入
<img alt="Vue logo" src="../assets/logo.png" >

//vue文件层级位置变化不需要重新引入
<img alt="Vue logo" src="url('@/assets/logo.png')" >

以上都可以

2.第二种方式:通过绑定的方式引入

img标签为例,在vue中使用如下

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

其中图片资源src也可以用

imgSrc:url('@/assets/logo.png')

3.第三种方式:通过import引入

img标签为例,在vue中使用如下

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

在上述1、2方式下也可以直接用第三种方式

在jsx、tsx中,上述1、2两种方式会不生效;需要通过第三种方式,如下:

<div>
 <img :src="'url('+imgSrc1+')'" alt="">
</div>

4.第四种方式:作为背景图时引入

以div为例,在vue中使用如下

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

也可以直接使用

<div>
<div class="div1" :style="{backgroundImage: url('@/assets/logo.png')}"></div>
</div>

你可能感兴趣的:(前端,VUE,vue.js,前端,javascript)