Vue系列：页面中图片等静态资源引用（包含vue3在vite下的图片引用）

前言

近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用，在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>

5.第五种方式：vue3 require报错require is not defined

vue3项目require引入css文件报错：require is not defined
1.用 import 代替 require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
2.vite官网静态资源处理 new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。
将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href 
document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！
这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。
然而，这个 URL 字符串必须是静态的，这样才好分析。
否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href