陕西建设集团韩城公司网站,wordpress免费汉化,做微信小程序和做网站,鞍山网民前言
近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用#xff0c;在vue页面jsx、tsx中使用的时候遇到些问题#xff1b; 对静态资源的引用使用总结如下
引入方式说明
以下代码实例以图片、vue环境为例#xff0c;不放视屏等引入实例#xff0c;视频使用方式…前言
近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用在vue页面jsx、tsx中使用的时候遇到些问题 对静态资源的引用使用总结如下
引入方式说明
以下代码实例以图片、vue环境为例不放视屏等引入实例视频使用方式举一反三套用即可
1.第一种方式直接引入
img标签为例代码如下
//vue文件层级位置变化需要重新引入
img altVue logo src../assets/logo.png //vue文件层级位置变化不需要重新引入
img altVue logo srcurl(/assets/logo.png) 以上都可以
2.第二种方式通过绑定的方式引入
img标签为例在vue中使用如下
div
img :srcimgSrc alt
/divscript
export default {data () {return {imgSrc: require(../assets/logo.png)}}
}
/script其中图片资源src也可以用
imgSrc:url(/assets/logo.png)3.第三种方式通过import引入
img标签为例在vue中使用如下
divimg :srcimgSrc1 alt
/divscript
import imgSrc from ../assets/logo.png
export default {data () {return {imgSrc1: imgSrc}}
}
/script在上述1、2方式下也可以直接用第三种方式
在jsx、tsx中上述1、2两种方式会不生效需要通过第三种方式如下
divimg :srcurl(imgSrc1) alt
/div4.第四种方式作为背景图时引入
以div为例在vue中使用如下
div
div classdiv1 :style{backgroundImage: url(imgSrc1)}/div
/divscript
import imgSrc from ../assets/logo.png
export default {data () {return {imgSrc1: imgSrc}}
}
/scriptstyle scoped
.div1{width: 400px;height: 400px;background-color: rgb(76, 175, 175);
}
/style也可以直接使用
div
div classdiv1 :style{backgroundImage: url(/assets/logo.png)}/div
/div
