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>