@conecli/cone-render 0.9.1-shop2.14 → 0.9.1-shop2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/base/LazyLoadImage/index.h5.module.scss +3 -0
  2. package/dist/components/base/LazyLoadImage/index.h5.tsx +1 -1
  3. package/dist/utils/index.h5.ts +1 -1
  4. package/dist/utils/utils.ts +1 -1
  5. package/package.json +1 -1
package/dist/components/base/LazyLoadImage/index.h5.tsx CHANGED
@@ -1 +1 @@
1
- import React, { useCallback, useEffect, useRef, useState } from 'react'
2
1
  TaroEventType,
3
2
  const {
4
3
  src,
5
4
  lazyLoad,
6
5
  imagRenderingSet,
7
6
  width,
8
7
  height,
9
8
  className,
10
9
  isSkuImage,
11
10
  hideErrorImage,
12
11
  style,
13
12
  backgroundColor,
14
13
  errorSrc,
15
14
  onLoad,
16
15
  onError,
17
16
  ...otherOption
18
17
  } = props
19
18
  getNetWorkType === NetWorkTypeQuality.default &&
20
19
  (getNetWorkType = global.info.sysInfo.netWorkType)
21
20
  const [loadSuccess, setLoadSuccess] = useState(false)
22
21
  const [imageErrState, setImageErrState] = useState(false)
23
22
  const [componentShowState, setComponentShowState] = useState(false)
24
23
  const measureRef = useRef < HTMLElement | null > (null)
25
24
  const [measureComplete, setMeasureComplete] = useState(false)
26
25
  const [imgSrc, setImgSrc] = useState(src)
27
26
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false)
28
27
  const hasRetryRef = useRef(false)
29
28
  const componentShowStateRef = useRef(false)
30
29
  const requestSrcRef = useRef(src)
31
30
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
32
31
  const enableAvifOptimize = isImageOptimizeEnable()
33
32
  const avifSupport = getAvifSupport()
34
33
  const webpSupport = getWebpSupport()
35
34
 
36
35
 
37
36
  const getRequestSrc = useCallback((src) => {
38
37
  const requestSrc = getQualityImage(
39
38
  imgSrc,
40
39
  { isSkuImage, size: measureRef?.current?.offsetWidth }
41
40
  )
42
41
  requestSrcRef.current = requestSrc
43
42
  return requestSrc
44
43
  }, [src])
45
44
  const imageErrorRetry = (src) => {
46
45
  return new Promise((resolve, reject) => {
47
46
  if(fetch && window && window.Image){
48
47
  fetch(src)
49
48
  .then(response => {
50
49
  const {ok, status} = response
51
50
  if (ok) {
52
51
  const originUrl = src.replace(/\.(jpe?g|png).*/, '.$1')
53
52
  response.blob().then(blob => {
54
53
  if(URL){
55
54
  const url = URL.createObjectURL(blob)
56
55
  const img = new window.Image()
57
56
  img.src = url;
58
57
  img.onload = () => {
59
58
  resolve({
60
59
  ok: true,
61
60
  url
62
61
  })
63
62
  setTimeout(() => {
64
63
  URL.revokeObjectURL(url)
65
64
  }, 1000)
66
65
  };
67
66
  img.onerror = () => {
68
67
  reportSGM({status, text: '图片解析异常', type: 'imageParseError', requestSrc: src})
69
68
  URL.revokeObjectURL(url)
70
69
  resolve({
71
70
  ok: true,
72
71
  url: originUrl
73
72
  })
74
73
  };
75
74
  }else{
76
75
  resolve({
77
76
  ok: true,
78
77
  url: originUrl
79
78
  })
80
79
  }
81
80
  }).catch(error => {
82
81
  resolve({
83
82
  ok: true,
84
83
  url: originUrl
85
84
  })
86
85
  console.error('LazyLoadImage imageErrorRetry() error:', error)
87
86
  });
88
87
  }else {
89
88
  if(status === 404){
90
89
  resolve({
91
90
  ok: false,
92
91
  text: '访问图片不存在',
93
92
  type: 'noSuchUrlImage',
94
93
  })
95
94
  }else{
96
95
  resolve({
97
96
  ok: false,
98
97
  status: status,
99
98
  text: '其它图片问题',
100
99
  type: 'otherImageError',
101
100
  })
102
101
  }
103
102
  }
104
103
  })
105
104
  .catch(error => {
106
105
  resolve({
107
106
  ok: false,
108
107
  text: '网络异常',
109
108
  type: 'networkError',
110
109
  })
111
110
  console.error('LazyLoadImage imageErrorRetry() error:', error)
112
111
  });
113
112
  }else{
114
113
  resolve({
115
114
  ok: false,
116
115
  text: '不支持重试',
117
116
  type: 'notSupportRetry',
118
117
  })
119
118
  }
120
119
  })
121
120
 
122
121
 
123
122
  const reportSGM = ({status, text, type, requestSrc = imgSrc}) => {
124
123
  const { shopId, venderId } = global.info.queryInfo || {}
125
124
  sgmCustomReport({
126
125
  code: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
127
126
  msg: {
128
127
  avifSupport,
129
128
  webpSupport,
130
129
  shopId,
131
130
  venderId,
132
131
  originSrc: src,
133
132
  requestSrc,
134
133
  status,
135
134
  text
136
135
  },
137
136
  })
138
137
  }
139
138
  const imageErrorHandle = useCallback(
140
139
  (e) => {
141
140
  console.log(' ==============> 图片加载错误', e)
142
141
  if (!hasRetryRef.current) {
143
142
  hasRetryRef.current = true
144
143
  if(src){
145
144
  try{
146
145
  imageErrorRetry(requestSrcRef.current).then((result) => {
147
146
  const { status, ok, text, type, url } = result || {}
148
147
  if(ok){
149
148
  setImgSrc(url)
150
149
  setHasRetrySuccess(true)
151
150
  }else{
152
151
  errorSrc && setImgSrc(errorSrc)
153
152
  hideErrorImage && setImageErrState(true)
154
153
  typeof onError === 'function' && onError(e, src, props)
155
154
  reportSGM({status, text, type, requestSrc: requestSrcRef.current})
156
155
  }
157
156
  })
158
157
  }catch(e){
159
158
  console.error('LazyLoadImage imageErrorHandle() error:', e)
160
159
  errorSrc && setImgSrc(errorSrc)
161
160
  hideErrorImage && setImageErrState(true)
162
161
  typeof onError === 'function' && onError(e, src, props)
163
162
  }
164
163
  }
165
164
  }else{
166
165
  reportSGM({status: '', text: '渲染原始图片渲染异常', type: 'renderOriginImageError'})
167
166
  }
168
167
  },
169
168
  [src, hasRetryRef.current],
170
169
  )
171
170
 
172
171
 
173
172
  const imageLoad = useCallback(
174
173
  (_src, event) => {
175
174
  setLoadSuccess(true)
176
175
  typeof onLoad === 'function' && onLoad(event, src, props)
177
176
  },
178
177
  [src],
179
178
  )
180
179
 
181
180
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
182
181
  const changeStyle = {}
183
182
  width && (changeStyle['width'] = width)
184
183
  height && (changeStyle['height'] = height)
185
184
  backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
186
185
  return changeStyle
187
186
  }
188
187
  useEffect(() => {
189
188
  setMeasureComplete(true)
190
189
  if (needShowHighVersion) return
191
190
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
192
191
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
193
192
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
194
193
  !componentShowStateRef.current && dealPageScrollInfo(res)
195
194
  })
196
195
  }, [])
197
196
 
198
197
  const dealPageScrollInfo = (res) => {
199
198
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
200
199
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
201
200
  if (measureRef.current) {
202
201
  const eleClientRect =
203
202
  measureRef.current.getBoundingClientRect()
204
203
  const getContainerHeightOffSetY =
205
204
  displayHeight * 1.5 + offSetY
206
205
  const eleOffsetTop = Math.ceil(eleClientRect.top)
207
206
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
208
207
  if (!componentShowStateRef.current) {
209
208
  if (getContainerHeightOffSetY > eleOffsetTop) {
210
209
  componentShowStateRef.current = true
211
210
  setComponentShowState(true)
212
211
  }
213
212
  }
214
213
  }
215
214
  }
216
215
  return (
217
216
  isH5AndJdShopView &&
218
217
  global?.config?.needImageLazy !== false &&
219
218
  !needShowHighVersion &&
220
219
  !isAppStowShop ? (
221
220
  <View
222
221
  ref={measureRef}
223
222
  className={classNames(
224
223
  imageStyle["d-app-lazy-image"],
225
224
  {
226
225
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
227
226
  },
228
227
  {
229
228
  [imageStyle["d-hide-image-error"]]: imageErrState,
230
229
  },
231
230
  {
232
231
  [imageStyle["d-load-completed"]]: loadSuccess,
233
232
  },
234
233
  {
235
234
  "d-imag-rendering-crisp-edges":
236
235
  !global.info.pageInfo.isVipShop && imagRenderingSet,
237
236
  },
238
237
  "J_html5ImageBg",
239
238
  className
240
239
  )}
241
240
  style={{
242
241
  ...style,
243
242
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
244
243
  }}
245
244
  {...otherOption}
246
245
  >
247
246
  {(componentShowState || lazyLoad === false) && (
248
247
  <img
249
248
  src={getQualityImage(
250
249
  imgSrc,
251
250
  global.info.pageInfo.isVipShop
252
251
  ? NetWorkTypeQuality["perfect"]
253
252
  : NetWorkTypeQuality[getNetWorkType]
254
253
  )}
255
254
  onLoad={imageLoad.bind(this, imgSrc)}
256
255
  onError={imageErrorHandle}
257
256
  />
258
257
  )}
259
258
  </View>
260
259
  ) : enableAvifOptimize ? (
261
260
  [
262
261
  measureComplete ? (
263
262
  <Image
264
263
  key={hasRetrySuccess? "realImageRetry": "realImage"}
265
264
  style={{
266
265
  ...style,
267
266
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
268
267
  }}
269
268
  className={classNames(
270
269
  imageStyle["d-lazy-image"],
271
270
  {
272
271
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
273
272
  },
274
273
  {
275
274
  [imageStyle["d-hide-image-error"]]: imageErrState,
276
275
  },
277
276
  {
278
277
  [imageStyle["d-load-completed"]]: loadSuccess,
279
278
  },
280
279
  {
281
280
  "d-imag-rendering-crisp-edges": imagRenderingSet,
282
281
  },
283
282
  className
284
283
  )}
285
284
  src={hasRetrySuccess? imgSrc: getRequestSrc(imgSrc)}
286
285
  lazyLoad={isChartH5 ? false : lazyLoad}
287
286
  onError={imageErrorHandle}
288
287
  onLoad={imageLoad.bind(this, imgSrc)}
289
288
  {...otherOption}
290
289
  />
291
290
  ) : (
292
291
  <Image
293
292
  key={"defaultImage"}
294
293
  style={{
295
294
  ...style,
296
295
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
297
296
  }}
298
297
  className={classNames(
299
298
  imageStyle["d-lazy-image"],
300
299
  {
301
300
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
302
301
  },
303
302
  {
304
303
  [imageStyle["d-hide-image-error"]]: imageErrState,
305
304
  },
306
305
  {
307
306
  [imageStyle["d-load-completed"]]: loadSuccess,
308
307
  },
309
308
  {
310
309
  "d-imag-rendering-crisp-edges": imagRenderingSet,
311
310
  },
312
311
  className
313
312
  )}
314
313
  src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
315
314
  />
316
315
  ),
317
316
  loadSuccess ? null : <View key={"measureRef"} ref={measureRef}></View>,
318
317
  ]
319
318
  ) : (
320
319
  <Image
321
320
  style={{
322
321
  ...style,
323
322
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
324
323
  }}
325
324
  className={classNames(
326
325
  imageStyle["d-lazy-image"],
327
326
  {
328
327
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
329
328
  },
330
329
  {
331
330
  [imageStyle["d-hide-image-error"]]: imageErrState,
332
331
  },
333
332
  {
334
333
  [imageStyle["d-load-completed"]]: loadSuccess,
335
334
  },
336
335
  {
337
336
  "d-imag-rendering-crisp-edges": imagRenderingSet,
338
337
  },
339
338
  className
340
339
  )}
341
340
  src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
342
341
  lazyLoad={isChartH5 ? false : lazyLoad}
343
342
  onError={imageErrorHandle}
344
343
  onLoad={imageLoad.bind(this, imgSrc)}
345
344
  {...otherOption}
346
345
  />
347
346
  )
348
347
  )
349
348
  lazyLoad: true,
350
349
  isSkuImage: false,
351
350
  hideErrorImage: false,
352
351
  imagRenderingSet: true,
353
352
  src: null,
354
353
  style: null,
355
354
  width: null,
356
355
  height: null,
357
356
  backgroundColor: null,
358
357
  className: null,
359
358
  errorSrc: null,
360
359
  onLoad: null,
361
360
  onError: null,
361
+ import React, { useCallback, useEffect, useRef, useState } from 'react'
362
362
  TaroEventType,
363
363
  const {
364
364
  src,
365
365
  lazyLoad,
366
366
  imagRenderingSet,
367
367
  width,
368
368
  height,
369
369
  className,
370
370
  isSkuImage,
371
371
  hideErrorImage,
372
372
  style,
373
373
  backgroundColor,
374
374
  errorSrc,
375
375
  onLoad,
376
376
  onError,
377
377
  ...otherOption
378
378
  } = props
379
379
  getNetWorkType === NetWorkTypeQuality.default &&
380
380
  (getNetWorkType = global.info.sysInfo.netWorkType)
381
381
  const [loadSuccess, setLoadSuccess] = useState(false)
382
382
  const [imageErrState, setImageErrState] = useState(false)
383
383
  const [componentShowState, setComponentShowState] = useState(false)
384
384
  const measureRef = useRef < HTMLElement | null > (null)
385
385
  const [measureComplete, setMeasureComplete] = useState(false)
386
386
  const [imgSrc, setImgSrc] = useState(src)
387
387
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false)
388
388
  const hasRetryRef = useRef(false)
389
389
  const componentShowStateRef = useRef(false)
390
390
  const requestSrcRef = useRef(src)
391
391
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
392
392
  const enableAvifOptimize = isImageOptimizeEnable()
393
393
  const avifSupport = getAvifSupport()
394
394
  const webpSupport = getWebpSupport()
395
395
 
396
396
 
397
397
  const getRequestSrc = useCallback((src) => {
398
398
  const requestSrc = getQualityImage(
399
399
  imgSrc,
400
400
  { isSkuImage, size: measureRef?.current?.offsetWidth }
401
401
  )
402
402
  requestSrcRef.current = requestSrc
403
403
  return requestSrc
404
404
  }, [src])
405
405
  const imageErrorRetry = (src) => {
406
406
  return new Promise((resolve, reject) => {
407
407
  if(fetch && window && window.Image){
408
408
  fetch(src)
409
409
  .then(response => {
410
410
  const {ok, status} = response
411
411
  if (ok) {
412
412
  const originUrl = src.replace(/\.(jpe?g|png).*/, '.$1')
413
413
  response.blob().then(blob => {
414
414
  if(URL){
415
415
  const url = URL.createObjectURL(blob)
416
416
  const img = new window.Image()
417
417
  img.src = url;
418
418
  img.onload = () => {
419
419
  reportSGM({status, text: '再次请求并且onload了', type: 'retryAndOnload', requestSrc: src, resolveUrl: url})
420
420
  resolve({
421
421
  ok: true,
422
422
  url
423
423
  })
424
424
  setTimeout(() => {
425
425
  URL.revokeObjectURL(url)
426
426
  }, 2000)
427
427
  };
428
428
  img.onerror = () => {
429
429
  reportSGM({status, text: '图片解析异常', type: 'imageParseError', requestSrc: src})
430
430
  URL.revokeObjectURL(url)
431
431
  resolve({
432
432
  ok: true,
433
433
  url: originUrl
434
434
  })
435
435
  };
436
436
  }else{
437
437
  resolve({
438
438
  ok: true,
439
439
  url: originUrl
440
440
  })
441
441
  }
442
442
  }).catch(error => {
443
443
  resolve({
444
444
  ok: true,
445
445
  url: originUrl
446
446
  })
447
447
  console.error('LazyLoadImage imageErrorRetry() error:', error)
448
448
  });
449
449
  }else {
450
450
  if(status === 404){
451
451
  resolve({
452
452
  ok: false,
453
453
  text: '访问图片不存在',
454
454
  type: 'noSuchUrlImage',
455
455
  })
456
456
  }else{
457
457
  resolve({
458
458
  ok: false,
459
459
  status: status,
460
460
  text: '其它图片问题',
461
461
  type: 'otherImageError',
462
462
  })
463
463
  }
464
464
  }
465
465
  })
466
466
  .catch(error => {
467
467
  resolve({
468
468
  ok: false,
469
469
  text: '网络异常',
470
470
  type: 'networkError',
471
471
  })
472
472
  console.error('LazyLoadImage imageErrorRetry() error:', error)
473
473
  });
474
474
  }else{
475
475
  resolve({
476
476
  ok: false,
477
477
  text: '不支持重试',
478
478
  type: 'notSupportRetry',
479
479
  })
480
480
  }
481
481
  })
482
482
 
483
483
 
484
484
  const reportSGM = ({status, text, type, requestSrc = imgSrc, resolveUrl = ''}) => {
485
485
  const { shopId, venderId } = global.info.queryInfo || {}
486
486
  sgmCustomReport({
487
487
  code: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
488
488
  msg: {
489
489
  avifSupport,
490
490
  webpSupport,
491
491
  shopId,
492
492
  venderId,
493
493
  originSrc: src,
494
494
  requestSrc,
495
495
  resolveUrl,
496
496
  status,
497
497
  text
498
498
  },
499
499
  })
500
500
  }
501
501
  const imageErrorHandle = useCallback(
502
502
  (e) => {
503
503
  console.log(' ==============> 图片加载错误', e)
504
504
  if (!hasRetryRef.current) {
505
505
  hasRetryRef.current = true
506
506
  if(src){
507
507
  try{
508
508
  imageErrorRetry(requestSrcRef.current).then((result) => {
509
509
  const { status, ok, text, type, url } = result || {}
510
510
  if(ok){
511
511
  setImgSrc(url)
512
512
  setHasRetrySuccess(true)
513
513
  }else{
514
514
  errorSrc && setImgSrc(errorSrc)
515
515
  hideErrorImage && setImageErrState(true)
516
516
  typeof onError === 'function' && onError(e, src, props)
517
517
  reportSGM({status, text, type, requestSrc: requestSrcRef.current})
518
518
  }
519
519
  })
520
520
  }catch(e){
521
521
  console.error('LazyLoadImage imageErrorHandle() error:', e)
522
522
  errorSrc && setImgSrc(errorSrc)
523
523
  hideErrorImage && setImageErrState(true)
524
524
  typeof onError === 'function' && onError(e, src, props)
525
525
  }
526
526
  }
527
527
  }else{
528
528
  reportSGM({status: '', text: '渲染原始图片渲染异常', type: 'renderOriginImageError'})
529
529
  if(imgSrc.includes('blob:')){
530
530
  reportSGM({status: '', text: '渲染本地blob图片异常', type: 'renderBlobImageError'})
531
531
  }else{
532
532
  reportSGM({status: '', text: '渲染本地非blob图片异常', type: 'renderNoBlobImageError'})
533
533
  }
534
534
  }
535
535
  },
536
536
  [src, hasRetryRef.current],
537
537
  )
538
538
 
539
539
 
540
540
  const imageLoad = useCallback(
541
541
  (_src, event) => {
542
542
  setLoadSuccess(true)
543
543
  typeof onLoad === 'function' && onLoad(event, src, props)
544
544
  },
545
545
  [src],
546
546
  )
547
547
 
548
548
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
549
549
  const changeStyle = {}
550
550
  width && (changeStyle['width'] = width)
551
551
  height && (changeStyle['height'] = height)
552
552
  backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
553
553
  return changeStyle
554
554
  }
555
555
  useEffect(() => {
556
556
  setMeasureComplete(true)
557
557
  if (needShowHighVersion) return
558
558
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
559
559
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
560
560
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
561
561
  !componentShowStateRef.current && dealPageScrollInfo(res)
562
562
  })
563
563
  }, [])
564
564
 
565
565
  const dealPageScrollInfo = (res) => {
566
566
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
567
567
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
568
568
  if (measureRef.current) {
569
569
  const eleClientRect =
570
570
  measureRef.current.getBoundingClientRect()
571
571
  const getContainerHeightOffSetY =
572
572
  displayHeight * 1.5 + offSetY
573
573
  const eleOffsetTop = Math.ceil(eleClientRect.top)
574
574
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
575
575
  if (!componentShowStateRef.current) {
576
576
  if (getContainerHeightOffSetY > eleOffsetTop) {
577
577
  componentShowStateRef.current = true
578
578
  setComponentShowState(true)
579
579
  }
580
580
  }
581
581
  }
582
582
  }
583
583
  return (
584
584
  isH5AndJdShopView &&
585
585
  global?.config?.needImageLazy !== false &&
586
586
  !needShowHighVersion &&
587
587
  !isAppStowShop ? (
588
588
  <View
589
589
  ref={measureRef}
590
590
  className={classNames(
591
591
  imageStyle["d-app-lazy-image"],
592
592
  {
593
593
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
594
594
  },
595
595
  {
596
596
  [imageStyle["d-hide-image-error"]]: imageErrState,
597
597
  },
598
598
  {
599
599
  [imageStyle["d-load-completed"]]: loadSuccess,
600
600
  },
601
601
  {
602
602
  "d-imag-rendering-crisp-edges":
603
603
  !global.info.pageInfo.isVipShop && imagRenderingSet,
604
604
  },
605
605
  "J_html5ImageBg",
606
606
  className
607
607
  )}
608
608
  style={{
609
609
  ...style,
610
610
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
611
611
  }}
612
612
  {...otherOption}
613
613
  >
614
614
  {(componentShowState || lazyLoad === false) && (
615
615
  <img
616
616
  src={getQualityImage(
617
617
  imgSrc,
618
618
  global.info.pageInfo.isVipShop
619
619
  ? NetWorkTypeQuality["perfect"]
620
620
  : NetWorkTypeQuality[getNetWorkType]
621
621
  )}
622
622
  onLoad={imageLoad.bind(this, imgSrc)}
623
623
  onError={imageErrorHandle}
624
624
  />
625
625
  )}
626
626
  </View>
627
627
  ) : enableAvifOptimize ? (
628
628
  [
629
629
  measureComplete ? (
630
630
  <Image
631
631
  key={hasRetrySuccess? "realImageRetry": "realImage"}
632
632
  style={{
633
633
  ...style,
634
634
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
635
635
  }}
636
636
  className={classNames(
637
637
  imageStyle["d-lazy-image"],
638
638
  {
639
639
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
640
640
  },
641
641
  {
642
642
  [imageStyle["d-hide-image-error"]]: imageErrState,
643
643
  },
644
644
  {
645
645
  [imageStyle["d-load-completed"]]: loadSuccess,
646
646
  },
647
647
  {
648
648
  "d-imag-rendering-crisp-edges": imagRenderingSet,
649
649
  },
650
650
  className
651
651
  )}
652
652
  src={hasRetrySuccess? imgSrc: getRequestSrc(imgSrc)}
653
653
  lazyLoad={isChartH5 ? false : lazyLoad}
654
654
  onError={imageErrorHandle}
655
655
  onLoad={imageLoad.bind(this, imgSrc)}
656
656
  {...otherOption}
657
657
  />
658
658
  ) : (
659
659
  <Image
660
660
  key={"defaultImage"}
661
661
  style={{
662
662
  ...style,
663
663
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
664
664
  }}
665
665
  className={classNames(
666
666
  imageStyle["d-lazy-image"],
667
667
  {
668
668
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
669
669
  },
670
670
  {
671
671
  [imageStyle["d-hide-image-error"]]: imageErrState,
672
672
  },
673
673
  {
674
674
  [imageStyle["d-load-completed"]]: loadSuccess,
675
675
  },
676
676
  {
677
677
  "d-imag-rendering-crisp-edges": imagRenderingSet,
678
678
  },
679
679
  className
680
680
  )}
681
681
  src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
682
682
  />
683
683
  ),
684
684
  loadSuccess ? null : <View key={"measureRef"} ref={measureRef}></View>,
685
685
  ]
686
686
  ) : (
687
687
  <Image
688
688
  style={{
689
689
  ...style,
690
690
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
691
691
  }}
692
692
  className={classNames(
693
693
  imageStyle["d-lazy-image"],
694
694
  {
695
695
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
696
696
  },
697
697
  {
698
698
  [imageStyle["d-hide-image-error"]]: imageErrState,
699
699
  },
700
700
  {
701
701
  [imageStyle["d-load-completed"]]: loadSuccess,
702
702
  },
703
703
  {
704
704
  "d-imag-rendering-crisp-edges": imagRenderingSet,
705
705
  },
706
706
  className
707
707
  )}
708
708
  src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
709
709
  lazyLoad={isChartH5 ? false : lazyLoad}
710
710
  onError={imageErrorHandle}
711
711
  onLoad={imageLoad.bind(this, imgSrc)}
712
712
  {...otherOption}
713
713
  />
714
714
  )
715
715
  )
716
716
  lazyLoad: true,
717
717
  isSkuImage: false,
718
718
  hideErrorImage: false,
719
719
  imagRenderingSet: true,
720
720
  src: null,
721
721
  style: null,
722
722
  width: null,
723
723
  height: null,
724
724
  backgroundColor: null,
725
725
  className: null,
726
726
  errorSrc: null,
727
727
  onLoad: null,
728
728
  onError: null,