C语言贴图图片路径不对,backgroundImage 路径问题 vue 图片的引入方式

项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式

在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。

处理方法： 使用require引入图片

img标签

背景图

###也可以下面这种方式去写： 在前端开发中，background-image属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在vue-cli项目中，如果如下面代码填写路径会找不到图片

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'

}

},

}

正确的应该这样写：

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方法

import Bg2 from '@/../static/images/logo2.png'

export default {

name: 'App',

data () {

return {

bg2: Bg2,

}

}

}

.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;

}

上述代码中，出现的诸如：~@/ 和 @/ ，如果删除后，测试效果也正常，你也可以都去掉，不影响。

错误的代码，截图对比，如下：

改：

foo

相比其他方法： 如果你用了vue-cli脚手架，在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: '../../'就行了

###以上是网上大佬分享的 以下是我总结的

组件内可正常引入 ：(图片要放在啥文件夹应该要了解)

css中引入：

在js中动态引入是不容易的 ：

页面显示为：

###但是页面上并为显示图片

我在组件内创建一个背景图测试：

页面有显示图片：

且图片样式变成了：

于是我修改js内的图片地址：

发现图片正常显示了：

总结原因应该是上面的：

####另外一种方法 今天突然想到了试了下成功了： 就是将图片先引入到需要的js文件中，如何在文件中需要的位置用${ } 调用：

这种方法比上面的要友好太多了

####今天有遇到一个图片引入的低级错误：在引入背景图片时需要当前元素有固定的宽高 不能再犯了