ionic 图片问题

   一,打包的app,在手机上不显示图片:

      因为打包后,文件的目录改了

                        

将发现 assets 下存放的是图片, build下是css文件,js文件,全部的html文件被放入在index.html中,所以对应的路径要修改下;就是把以前的../../assets/img/logo.png改为

./assets/img/logo.png(html中修改),css文件引入图片为../assets/img。

二修改app名字和logo

修改根目录下config.xml--name标签

APP图标和启动画


在项目的根目录下创建resources文件夹
在文件夹中都放入
icon.png(应用图标,最小192x192px,不带圆角),
splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)
(可以是png、psd、ai)


在cmd中进入项目所在文件夹执行:ionic resources


出现问题:"Invalid upload: unable to read uploaded image"


解决问题:把图片格式给换成了ai格式

然后再执行ionic resources


执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,如:android,其中会自动将图片进行缩放、裁剪,生成不同分辨率的图片,并在config.xml中添加相应内容

借鉴文章:https://jingyan.baidu.com/article/fdffd1f85ee24ef3e88ca164.html

http://blog.csdn.net/wtunique/article/details/78554736



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ionic 中实现图片预览可以使用 Ionic 的 ion-slides 组件和 ngx-gallery 库。 1. 首先,在终端中运行以下命令安装 ngx-gallery 库: ``` npm install @kolkov/ngx-gallery --save ``` 2. 在 app.module.ts 中导入 NgxGalleryModule: ```typescript import { NgxGalleryModule } from '@kolkov/ngx-gallery'; @NgModule({ imports: [ // ... NgxGalleryModule ], // ... }) export class AppModule { } ``` 3. 在 HTML 中使用 ion-slides 组件,并在其中使用 ngx-gallery: ```html <ion-slides pager="true"> <ion-slide *ngFor="let image of images"> <ngx-gallery [options]="galleryOptions" [images]="[image]"></ngx-gallery> </ion-slide> </ion-slides> ``` 4. 在 TypeScript 文件中定义图片和 ngx-gallery 的选项: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { images = [ { small: 'https://picsum.photos/id/1018/200/300', medium: 'https://picsum.photos/id/1018/500/750', big: 'https://picsum.photos/id/1018/1200/1800', description: 'Image 1' }, { small: 'https://picsum.photos/id/1015/200/300', medium: 'https://picsum.photos/id/1015/500/750', big: 'https://picsum.photos/id/1015/1200/1800', description: 'Image 2' }, { small: 'https://picsum.photos/id/1019/200/300', medium: 'https://picsum.photos/id/1019/500/750', big: 'https://picsum.photos/id/1019/1200/1800', description: 'Image 3' } ]; galleryOptions = [ { width: '100%', height: 'auto', thumbnailsColumns: 4, imageAnimation: 'slide', preview: false } ]; constructor() {} } ``` 这样,就可以在 Ionic 中实现图片预览了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值