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