前言
近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用，在vue页面jsx、tsx中使用的时候遇到些问题；
对静态资源的引用使用总结如下
引入方式说明
以下代码实例以图片、vue环境为例，不放视屏等引入实例，视频使用方式举一反三，套用即可；
1.第一种方式：直接引入
//vue文件层级位置变化需要重新引入
<img alt="Vue logo" src="../assets/logo.png" >
//vue文件层级位置变化不需要重新引入
<img alt="Vue logo" src="url('@/assets/logo.png')" >
以上都可以
2.第二种方式：通过绑定的方式引入
<div>
<img :src="imgSrc" alt="">
</div>
<script>
export default {
data () {
return {
imgSrc: require('../assets/logo.png')
}
}
}
</script>
imgSrc:url('@/assets/logo.png')
3.第三种方式：通过import引入
<div>
<img :src="imgSrc1" alt="">
</div>
<script>
import imgSrc from '../assets/logo.png'
export default {
data () {
return {
imgSrc1: imgSrc
}
}
}
</script>
在jsx、tsx中，上述1、2两种方式会不生效；需要通过第三种方式，如下：
<div>
<img :src="'url('+imgSrc1+')'" alt="">
</div>
4.第四种方式：作为背景图时引入
<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>
原文地址:https://blog.csdn.net/I_nur/article/details/134703752
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_20042.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
