Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 1706bc7

Browse files
Sam HSam H
Sam H
authored and
Sam H
committed
fix: fix img format detection for .webp conversion, don't change svg
1 parent d7e7df0 commit 1706bc7

File tree

3 files changed

+22
-27
lines changed

3 files changed

+22
-27
lines changed

‎src/components.d.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@ declare global {
3636
}
3737

3838
interface AppCta {
39-
'hideButton': boolean;
40-
'linkUrl': string;
39+
4140
}
4241

4342
interface AppFooter {
@@ -400,8 +399,7 @@ declare global {
400399
}
401400

402401
export interface AppCtaAttributes extends HTMLAttributes {
403-
'hideButton'?: boolean;
404-
'linkUrl'?: string;
402+
405403
}
406404

407405
export interface AppFooterAttributes extends HTMLAttributes {

‎src/components/app-img/app-img.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,17 @@ export class Img {
5959
private changeImageFormat() {
6060
if (this.loadSrc && localStorage.getItem('allowWebp') === 'true') {
6161
const idx = this.loadSrc.lastIndexOf('.');
62-
this.loadSrc = `${this.loadSrc.substring(0, idx)}.webp`;
62+
console.log(idx);
63+
const ext = this.loadSrc.substring(idx + 1, this.loadSrc.length);
64+
if (ext === 'png' || ext === 'jpg' || ext === 'jpeg') {
65+
this.loadSrc = `${this.loadSrc.substring(0, idx)}.webp`;
66+
}
6367
}
6468
}
6569

6670
render() {
6771
this.changeImageFormat();
6872
console.log(this.loadSrc);
69-
return (
70-
<img
71-
class={{ fit: this.fit }}
72-
src={this.loadSrc}
73-
alt={this.alt}
74-
decoding="async"
75-
/>
76-
);
73+
return <img class={{ fit: this.fit }} src={this.loadSrc} alt={this.alt} decoding="async" />;
7774
}
7875
}

‎src/pages/app-home/app-home.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export class AppHome {
143143
<div class="carousel-item active">
144144
<div class="row">
145145
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
146-
<img class="carousel-image-h" src="/assets/svg/home-graphic-process-discovery.svg" />
146+
<app-img class="carousel-image-h" src="/assets/svg/home-graphic-process-discovery.svg" />
147147
</div>
148148
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
149149
<div class="carousel-text">
@@ -161,7 +161,7 @@ export class AppHome {
161161
<div class="carousel-item">
162162
<div class="row">
163163
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
164-
<img class="carousel-image-h" src="/assets/svg/home-graphic-process-design.svg" />
164+
<app-img class="carousel-image-h" src="/assets/svg/home-graphic-process-design.svg" />
165165
</div>
166166
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
167167
<div class="carousel-text">
@@ -179,7 +179,7 @@ export class AppHome {
179179
<div class="carousel-item">
180180
<div class="row">
181181
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
182-
<img class="carousel-image" src="/assets/svg/home-graphic-process-development.svg" />
182+
<app-img class="carousel-image" src="/assets/svg/home-graphic-process-development.svg" />
183183
</div>
184184
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
185185
<div class="carousel-text">
@@ -197,7 +197,7 @@ export class AppHome {
197197
<div class="carousel-item">
198198
<div class="row">
199199
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
200-
<img class="carousel-image" src="/assets/svg/home-graphic-process-deployment.svg" />
200+
<app-img class="carousel-image" src="/assets/svg/home-graphic-process-deployment.svg" />
201201
</div>
202202
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
203203
<div class="carousel-text">
@@ -215,7 +215,7 @@ export class AppHome {
215215
<div class="carousel-item">
216216
<div class="row">
217217
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center ">
218-
<img class="carousel-image-userfeedback" src="/assets/svg/home-graphic-process-userfeedback.svg" />
218+
<app-img class="carousel-image-userfeedback" src="/assets/svg/home-graphic-process-userfeedback.svg" />
219219
</div>
220220
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
221221
<div class="carousel-text">
@@ -262,16 +262,16 @@ export class AppHome {
262262
<div class="row store-buttons">
263263
<div class="col-6 text-right">
264264
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank">
265-
<img src="/assets/graphic-apple-appstore.png" />
265+
<app-img src="/assets/graphic-apple-appstore.png" />
266266
</a>
267267
</div>
268268
<div class="col-6 text-left">
269269
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank">
270-
<img src="/assets/graphic-google-googleplaystore.png" />
270+
<app-img src="/assets/graphic-google-googleplaystore.png" />
271271
</a>
272272
</div>
273273
</div>
274-
<img src="/assets/shared-graphic-loudcloud.png" class="phone-image" />
274+
<app-img src="/assets/shared-graphic-loudcloud.png" class="phone-image" />
275275
</div>
276276
</div>
277277
<div class="content-panel voyage">
@@ -288,16 +288,16 @@ export class AppHome {
288288
<div class="row store-buttons">
289289
<div class="col-6 text-right">
290290
<a href="https://itunes.apple.com/us/app/the-voyage-by-new-ocean-health/id779637437?mt=8" target="_blank">
291-
<img src="/assets/graphic-apple-appstore.png" />
291+
<app-img src="/assets/graphic-apple-appstore.png" />
292292
</a>
293293
</div>
294294
<div class="col-6 text-left">
295295
<a href="https://play.google.com/store/apps/details?id=com.carecaminnovations.mobile" target="_blank">
296-
<img src="/assets/graphic-google-googleplaystore.png" />
296+
<app-img src="/assets/graphic-google-googleplaystore.png" />
297297
</a>
298298
</div>
299299
</div>
300-
<img src="/assets/shared-graphic-voyage.png" class="phone-image" />
300+
<app-img src="/assets/shared-graphic-voyage.png" class="phone-image" />
301301
</div>
302302
</div>
303303
<div class="content-panel juntoscope">
@@ -314,16 +314,16 @@ export class AppHome {
314314
<div class="row store-buttons">
315315
<div class="col-6 text-right">
316316
<a href="https://itunes.apple.com/us/app/digi-thermo/id1307130445?mt=8" target="_blank">
317-
<img src="/assets/graphic-apple-appstore.png" />
317+
<app-img src="/assets/graphic-apple-appstore.png" />
318318
</a>
319319
</div>
320320
<div class="col-6 text-left">
321321
<a href="https://play.google.com/store/apps/details?id=com.webjuntollc.digithermoapp" target="_blank">
322-
<img src="/assets/graphic-google-googleplaystore.png" />
322+
<app-img src="/assets/graphic-google-googleplaystore.png" />
323323
</a>
324324
</div>
325325
</div>
326-
<img src="/assets/shared-graphic-juntoscope.png" class="phone-image" />
326+
<app-img src="/assets/shared-graphic-juntoscope.png" class="phone-image" />
327327
</div>
328328
</div>
329329
<div class="content-panel last-panel" />

0 commit comments

Comments
 (0)