vue学习笔记9——图片路径问题
来源:互联网 发布:网络招生方案 编辑:程序博客网 时间:2024/06/11 08:03
vue学习笔记9——图片路径问题
当npm run build的时候生成dist文件夹后
会有css中的background-img显示不出来或是js中或<script>
中的url或是其他的引入,导致图片无法显示的问题
一般,开始的时候,我们习惯在assets里面存在img文件,(至少我是这么做的)
当时的static文件夹里为空,
当npm run build的时候会自动生成static文件夹,并在里面生成对应的js,css,img3个文件夹,存放静态文件
npm run build完成后要在dist文件夹中的index能打开有显示时,可能有下列问题:
可能存在 js没有加载出来,导致页面没有任何的显示
可能存在图片,没有加载出来,不管是css中还是js中或是<script>
中的
解决:
在webpackbase中,目前版本的vue-cli脚手架搭建出来的是这个样子的
一个三目,判断是build还是dev,所以去config文件夹中的index.js文件中查看
在build模块中
assetsPublicPath: './', //默认是 '/' ,我改成的'./'
让其指向根目录dist
js中的用require 方法,使图片可正常的显示:
<script>export default{ data () { return { hot_sells: [ {url: '/static/img/shuncai/Avalokitesvara/Avalokitesvara1.jpeg'}, // {url: './assets/img/shuncai/Buddha/Buddha2.jpeg'}, {url: require('../../../../assets/img/shuncai/jade/jade3.jpeg')}, // 将js中所有的url,都使用require+相对路径的方法来引入图片。 {url: '../../../../assets/img/shuncai/jade/jade3.jpeg'}, {url: '../../../assets/img/shuncai/leaf/leaf1.jpeg'} ] } }}</script>
css中的图片和template
中的图片用相对路径指向assets/img(存放图片的文件夹)
再次npm run build 完成后,再到dist中的index.html文件可以通过编辑器自带的服务器打开,就不会出现js和图片的加载丢失的问题了
我会在
vue学习笔记10
的时候
写我的这个简单的demo的github地址
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。
- vue学习笔记9——图片路径问题
- vue绑定图片路径数据问题
- vue小笔记 解决build 相对路径报错问题和静态图片路径报错的问题
- Vue学习笔记之 路由路径
- vue学习笔记—vue基础(一)
- vue学习笔记—vue基础(二)
- vue.js 部署中碰到的图片路径问题
- vue踩坑系列——backgroundImage路径问题
- opencv学习笔记(1)——读取路径显示图片和保存jpg图片
- vue.js学习笔记-9
- vue引入图片问题
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列六——Vue单元测试Karma+Mocha学习笔记
- Vue.js学习系列六——Vue单元测试Karma+Mocha学习笔记
- Android学习笔记——从SD卡中读取一张图片得到图片的路径和名称
- vue学习笔记:vue-router
- SetWindowLong基础理论
- NYOJ28
- ImagerLoader 的使用
- Android 扫一扫功能实现 (集成ZXing)
- 动态配置爬虫
- vue学习笔记9——图片路径问题
- JavaScript学习总结(十五)——Function类
- Mybatis系列(七)之多表关联映射
- ReactNative学习第三天 UI篇 React-native-Swiper
- 开始博客园之旅
- Python库资源大全
- Linux配置防火墙 开启端口
- 一个bug引发的“血案”
- 自动化-Selenium WebDriver相关技术点总结