VUE使用v-bind给src属性绑定路径成功但无法显示解决方法

淦，踩坑就完事了，在VUE里面你直接给它绑一个路径的话是跟之前原生JS那套不一样的，如果是原生JS，这样给这个src值以后就能显示出来了，但是在VUE里面，运行npm run serve之后，他会打包再运行，打包完了以后，之前写的在项目中看的正确的路径，在打包完事后就变味了，所以需要这么整

这是原来的踩坑之前的代码

<template>
	<div>
		<video ref="video" loop muted autoplay></video>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				img:"../../../assets/video/video.mp4"
			}
			
		},
		created() {
			
		},
		mounted() {
			this.getImage();
		},
		methods:{
			getImage(){
				// let img = document.getElementById()
				this.$refs.video.src = this.img
			}
		}
	}
	
</script>

<style>
</style>

这是修改完以后的

<template>
	<div>
		<video ref="video" loop muted autoplay></video>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				img:require("@/assets/video/video.mp4")
			}
			
		},
		created() {
			
		},
		mounted() {
			this.getImage();
		},
		methods:{
			getImage(){
				// let img = document.getElementById()
				this.$refs.video.src = this.img
			}
		}
	}
	
</script>

<style>
</style>

按照这个写完以后，就可以让他自动转换为打包后的那一套路径，自然而然就可以显示了

require函数
下面这一段引用自阮一峰大神的文章

当 Node 遇到 require(X) 时，按下面的顺序处理。

（1）如果 X 是内置模块（比如 require(‘http’）)
　　a. 返回该模块。
　　b. 不再继续执行。

（2）如果 X 以 “./” 或者 “/” 或者 “…/” 开头
　　a. 根据 X 所在的父模块，确定 X 的绝对路径。
　　b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

X
X.js
X.json
X.node
　　c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

X/package.json（main字段）
X/index.js
X/index.json
X/index.node
（3）如果 X 不带路径
　　a. 根据 X 所在的父模块，确定 X 可能的安装目录。
　　b. 依次在每个目录中，将 X 当成文件名或目录名加载。

（4） 抛出 “not found”

@符作用：
参考博客：
https://blog.youkuaiyun.com/niceyoo/article/details/89347167
相当于src，按上面代码举例，实际上给require的路径为src/assets/video/video.mp4