backgroundImage路径问题vue图片的引入方式
backgroundImage路径问题vue图⽚的引⼊⽅式
⾃：
⾃：
项⽬中图⽚都放在src/img⽂件夹，img和background-image引⽤都⽤相对路径，即../../这种形式
制衣厂厂规在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。
处理⽅法：
使⽤require引⼊图⽚
img标签
背景图
<div :></div>
<span :>
也可以下⾯这种⽅式去写：
在前端开发中，background-image属性⾮常常见，有很多时候需要使⽤内联样式来绑定此属性，但是在vue-cli项⽬中，如果如下⾯代码填写路径会不到图⽚
<script type="text/javascript">
import TemplateNav from './TemplateNav'
export default {
name: 'FooterNav',
components: {
'TemplateNav': TemplateNav
},
data() {
return {
//使⽤相对路径会不到图⽚
shouye:'url(../../assets/images/shouye/index2x.png)',
fenlei:'url(../../assets/images/shouye/fenlei2x.png)',
search:'url(../../assets/images/shouye/search2x.png)',
shopcart:'url(../../assets/images/shouye/gouwuche2x.png)',
mine:'url(../../assets/images/shouye/I2x.png)'
}
},
props: {
num: {
default: '0'
}
},
}
</script>
正确的应该这样写：
data() {
return {
shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',
fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',
search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',
shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',
mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'
}
}
使⽤require()⽅法，require()是node.js⽅法
<template>
<div class="demo">
<!-- 成功引⼊的三种⽅法： -->
<!-- 图1 -->
<div class="img1"></div>
<!-- 图2 -->
<div class="img2" :></div>
<!-- 图3 -->
<img src="~@/../static/images/logo3.png" width="100">
</div>
</template>
<script>
import Bg2 from '@/../static/images/logo2.png'
export default {
name: 'App',
data () {
return {
元旦 祝福bg2: Bg2,
}
}
}
</script>
<style>
.demo{width: 100px;margin: 50px auto;}
.img1{
width: 100px;
height: 100px;
background: url('~@/../static/images/logo1.png') center center no-repeat;
background-size: 100px auto;
}
.img2{
width: 100px;
height: 100px;
background-position: center center;
background-repeat:  no-repeat;
background-size: 100px auto;
}
</style>
上述代码中，出现的诸如：~@/ 和 @/ ，如果删除后，测试效果也正常，你也可以都去掉，不影响。
错误的代码，截图对⽐，如下：
劳务资质怎么办理改：
<div :>foo</div>简体字转换繁体字
相⽐其他⽅法：
如果你⽤了vue-cli脚⼿架，在build/utils.js中到ExtractTextPlugin位置在对象中加⼊这句publicPath: '../../'就⾏了具体参考官⽅⽂档：
以上是⽹上⼤佬分享的以下是我总结的
组件内可正常引⼊：（图⽚要放在啥⽂件夹应该要了解）
css中引⼊：
在js中动态引⼊是不容易的：
页⾯显⽰为：
但是页⾯上并为显⽰图⽚
我在组件内创建⼀个背景图测试：
页⾯有显⽰图⽚：
且图⽚样式变成了：
于是我修改js内的图⽚地址：
发现图⽚正常显⽰了：
会计中级职称
总结原因应该是上⾯的：
另外⼀种⽅法今天突然想到了试了下成功了：
就是将图⽚先引⼊到需要的js⽂件中，如何在⽂件中需要的位置⽤ ${ } 调⽤：
上海景点排行榜
这种⽅法⽐上⾯的要友好太多了
今天有遇到⼀个图⽚引⼊的低级错误：在引⼊背景图⽚时需要当前元素有固定的宽⾼不能再犯了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。