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;
}
上述代码中,出现的诸如:~@/ 和 @/ ,如果删除后,测试效果也正常,你也可以都去掉,不影响。
错误的代码,截图对比,如下:
改:
相比其他方法: 如果你用了vue-cli脚手架,在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: '../../'就行了
###以上是网上大佬分享的 以下是我总结的
组件内可正常引入 :(图片要放在啥文件夹应该要了解)
css中引入:
在js中动态引入是不容易的 :
页面显示为:
###但是页面上并为显示图片
我在组件内创建一个背景图测试:
页面有显示图片:
且图片样式变成了:
于是我修改js内的图片地址:
发现图片正常显示了:
总结原因应该是上面的:
####另外一种方法 今天突然想到了试了下成功了: 就是将图片先引入到需要的js文件中,如何在文件中需要的位置用${ } 调用:
这种方法比上面的要友好太多了
####今天有遇到一个图片引入的低级错误:在引入背景图片时需要当前元素有固定的宽高 不能再犯了
C语言贴图图片路径不对,backgroundImage 路径问题 vue 图片的引入方式相关推荐
- vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
- html框架代码背景图片,CSS3中background-image实现多背景图片(代码实例)
本文目标: 1.掌握background-image多背景的实现 问题: 1.实现以下效果,使用纯DIV+CSS,必须使用background-image 附加说明: 1.整体宽度是1000px,高3 ...
- vue中当图片地址无效的时候,显示默认图片的方法
1.项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉,或者直接报错,图片裂开,对 ...
- uni-app微信小程序image引入图片;background-image背景图引入图片;小程序预览本地图片;小程序图片过大引入报错;获取本地图片的网络地址;
uni-app小程序图片使用有image标签和background-image背景图两种方式: 下有获取本地图片的网络地址方式:见第四步 一.方式一:使用image标签引入: uni-app官方ima ...
- vue 打包css路径不对_vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名、合并两个不同路径下图片文件名等目录/路径案例、正确加载图片路径)之详细攻略
Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名.合并两个不同路径下图片文件名等目录/路径案例.正确加载图片路径)之详细攻略 目录 利用python ...
- Go语言并发爬虫,爬取空姐网所有相册图片
转载地址:Go语言中文网 说到爬虫,不得不提到我自己写的<Python网络爬虫requests.bs4爬取空姐网图片>,可以在我的csdn看到这篇文章.这个爬虫很简洁,使用requests ...
- uni-app开发h5 发布后背景图片找不到路径
项目前提: 1.使用的是uni-app的UI框架uview; 2.项目有多套主题,需要根据不同主题获取不同样式及图片,所以需要根据主题获取此处背景图 代码如下(banner组件下方有个背景图,menu ...
- element ui背景图_vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径 是不能显示图片的. 也不能直接background...,就是说不通过 ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
最新文章
- C#学习-EF在三层中使用
- oracle中表空间的相关操作
- 《python源码剖析》,看看
- android442电视怎么投屏,哔哩哔哩怎么投屏电视? b站投屏的方法
- 判断两个字符串是否为旋转词
- 微机原理换行代码_东华大学微机原理课程设计--代码转换
- s5pv210——串口(UART)通信实战
- 简述get 和 post 的主要区别——计算机网络
- Transposed Convolution 反卷积
- 爬取 wallhaven图片到本地壁纸库
- 采用Kettle分页处理大数据量抽取任务
- Java图书管理系统(控制台程序)
- 计算机和资源管理器的异同,计算机应用基础ex.doc
- 算法 | 八大排序算法,含动态图详解
- IBDP1 经济好学吗?学习建议分享
- Facebook内战:关于欲望、天才和背叛的故事
- 小程序 H5页面video的适配问题
- NLP:自然语言处理技术近十年发展技术更迭的简介、案例之详细攻略(持续更新)daiding待更新
- Mac系统配置vue环境出现的权限问题解决方法
- lb是什么计算机术语,lb什么意思的缩写(lb单位换算方式一览)
热门文章
- 20200127每日一句
- 190606每日一句
- C++ 中 Windows 编程概述
- sharelatex 编辑论文
- 181218每日一句
- unity每次运行总是game窗口最大化怎么解决?
- Atitit 反模式 黑名单 异常处理 反模式(antipatterns) 目录 1.1. 记录并抛出(log and throw)	1 1.2. 抛出异常基类(Throwing Excepti
- Atitit 项目常用模块 非业务模块 通用技术模块 attilax大总结 理论上可行。但要限制接口方式。 不然现在很多ui与后端接口模式很多,导致组合爆炸。。。 常用模块也就100来个而已。。
- Atitit tomcat 启动报错 ZipException: archive is not a ZIP archive. 1.1. ----Should sh lib jar err...	1
- atitti 提升稳定性的艺术之程序代码级别稳定性的艺术 attialx著 艾提拉著 s420.docx 1. 前言	1 2. 为什么会发生稳定性问题	1 2.1. 单点故障(单点故障率较高)	1