fix: 修复loading图片地址异常问题

common/markdown/markdown.config.js

@@ -2,14 +2,14 @@
  * markdown配置
  */
 
-import {
-	getAppConfigs
-} from '@/config/index.js'
+import {getAppConfigs} from '@/config/index.js'
 import HaloTokenConfig from '@/config/token.config.js'
+import utils from '@/utils/index.js'
+
 export default {
-	domain: HaloTokenConfig.BASE_API,
-	tagStyle: {
-		table: ` 
+    domain: HaloTokenConfig.BASE_API,
+    tagStyle: {
+        table: ` 
 			table-layout: fixed;
 			border-collapse:collapse;
 			margin-bottom: 18px;
@@ -20,17 +20,17 @@ export default {
 			border: 1px solid #dcdcdc;
 			border-radius: 4px;
 		`,
-		th: `
+        th: `
 			padding: 8px;
 			border-right: 1px solid var(--classE);
 			border-bottom: 1px solid var(--classE);
 		`,
-		td: `
+        td: `
 			padding: 8px;
 			border-right: 1px solid var(--classE);
 			border-bottom: 1px solid var(--classE);
 		`,
-		blockquote: `
+        blockquote: `
 			padding: 8px 15px;
 		    color: #606266;
 		    background: #f2f6fc;
@@ -39,62 +39,62 @@ export default {
 			line-height: 26px;
 			margin-bottom: 18px;
 		`,
-		ul: 'padding-left: 15px;line-height: 1.85;',
-		ol: 'padding-left: 15px;line-height: 1.85;',
-		li: 'margin-bottom: 12px;line-height: 1.85;',
-		h1: `
+        ul: 'padding-left: 15px;line-height: 1.85;',
+        ol: 'padding-left: 15px;line-height: 1.85;',
+        li: 'margin-bottom: 12px;line-height: 1.85;',
+        h1: `
 			margin: 30px 0 20px;
 			color: var(--main);
 			line-height: 24px;
 			position: relative;
 			font-size:1.2em;
 			`,
-		h2: `
+        h2: `
 			color: var(--main);
 			line-height: 24px;
 			position: relative;
 			margin: 22px 0 16px;
 			font-size: 1.16em;
 		`,
-		h3: `
+        h3: `
 		    color: var(--main);
 		    line-height: 24px;
 		    position: relative;
 			margin: 26px 0 18px;
 			font-size: 1.14em;
 		`,
-		h4: `
+        h4: `
 			color: var(--main);
 		    line-height: 24px;
 		    margin-bottom: 18px;
 		    position: relative;
 			font-size: 1.12em;
 		`,
-		h5: `
+        h5: `
 			color: var(--main);
 		    line-height: 24px;
 		    margin-bottom: 14px;
 		    position: relative;
 			font-size: 1.1em;
 		`,
-		h6: `
+        h6: `
 			color: #303133;
 			line-height: 24px;
 			margin-bottom: 14px;
 			position: relative;
 			font-size: 14px;
 		`,
-		p: `
+        p: `
 		    line-height: 1.65;
 		    margin-bottom: 14px;
 			font-size: 14px;
 		`,
-		'code': `  `,
-		strong: 'font-weight: 700;color: rgb(248, 57, 41);',
-		video: 'width: 100%',
-	},
-	containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
+        'code': `  `,
+        strong: 'font-weight: 700;color: rgb(248, 57, 41);',
+        video: 'width: 100%',
+    },
+    containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
 
-	loadingGif: getAppConfigs().imagesConfig.loadingGifUrl,
-	emptyGif: getAppConfigs().imagesConfig.loadingEmptyUrl,
-}
+    loadingGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingGifUrl),
+    emptyGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingEmptyUrl),
+}

components/cache-image/cache-image.vue

@@ -1,197 +1,198 @@
 <template>
-	<view class="cache-image-wrap">
-		<view v-if="loadStatus == 'loading'" class="img-loading" :style="[imgStyle, loadStyle]">
-			<!-- <text class="img-load-icon iconfont icon-loading"></text>
-			<text class="img-load-text">{{ loadText }}</text> -->
-			<image :src="loadingImgSrc" :style="[loadingImgStyle]" mode="aspectFit"></image>
-		</view>
-		<view v-if="loadStatus == 'error'" class="img-error" :style="[imgStyle, loadErrStyle]">
-			<!-- <text class="img-err-icon iconfont icon-exclamation-circle"></text>
-			<text class="img-load-text">{{ loadErrText }}</text> -->
-			<image class="img-error-img" :src="loadingErrorImageSrc" mode="scaleToFill"></image>
-		</view>
-		<image v-show="loadStatus == 'success'" :src="src" @load="fnOnLoad" @error="fnOnError" :lazy-load="lazyLoad"
-			:style="[imgStyle]" :mode="mode" @click="$emit('on-click', url)"></image>
-	</view>
+    <view class="cache-image-wrap">
+        <view v-if="loadStatus == 'loading'" class="img-loading" :style="[imgStyle, loadStyle]">
+            <!-- <text class="img-load-icon iconfont icon-loading"></text>
+            <text class="img-load-text">{{ loadText }}</text> -->
+            <image :src="loadingImgSrc" :style="[loadingImgStyle]" mode="aspectFit"></image>
+        </view>
+        <view v-if="loadStatus == 'error'" class="img-error" :style="[imgStyle, loadErrStyle]">
+            <!-- <text class="img-err-icon iconfont icon-exclamation-circle"></text>
+            <text class="img-load-text">{{ loadErrText }}</text> -->
+            <image class="img-error-img" :src="loadingErrorImageSrc" mode="scaleToFill"></image>
+        </view>
+        <image v-show="loadStatus == 'success'" :src="src" @load="fnOnLoad" @error="fnOnError" :lazy-load="lazyLoad"
+               :style="[imgStyle]" :mode="mode" @click="$emit('on-click', url)"></image>
+    </view>
 </template>
 
 <script>
-	import imageCache from '@/utils/imageCache.js';
-	export default {
-		name: 'cache-image',
-		props: {
-			url: {
-				type: String,
-				default: ''
-			},
-			lazyLoad: {
-				type: Boolean,
-				default: true
-			},
-			loadStyle: {
-				type: Object,
-				default () {
-					return {
-						backgroundColor: '#ffffff',
-						color: '#333'
-					};
-				}
-			},
-			loadErrStyle: {
-				type: Object,
-				default () {
-					return {
-						color: 'rgba(244, 67, 54,1)'
-						// backgroundColor: 'rgba(244, 67, 54,0.2)'
-					};
-				}
-			},
-			mode: {
-				type: String,
-				default: 'aspectFill'
-			},
-			loadText: {
-				type: String,
-				default: '加载中...'
-			},
-			loadErrText: {
-				type: String,
-				default: '加载失败'
-			},
-			fileMd5: {
-				type: String,
-				default: ''
-			},
-			styles: {
-				type: Object,
-				default () {
-					return {};
-				}
-			},
-			width: {
-				type: String,
-				default: '100%'
-			},
-			height: {
-				type: String,
-				default: '100%'
-			},
-			radius: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				imgStyle: {},
-				loadingImgStyle: {
-					width: '120rpx',
-				},
-				src: '', // 图片地址
-				loadStatus: 'loading'
-			};
-		},
-		computed: {
-			imagesConfig() {
-				return this.$tm.vx.getters().getConfigs.imagesConfig
-			},
-			loadingImgSrc() {
-				return this.imagesConfig.loadingGifUrl;
-			},
-			loadingErrorImageSrc() {
-				return this.imagesConfig.loadingErrUrl
-			}
-		},
-		watch: {
-			// 监听图片md5值的变化
-			fileMd5(val) {
-				// 查找获取图片缓存
-				this.fnGetImageCache();
-			}
-		},
-		created() {
-			this.imgStyle = {
-				width: this.width,
-				height: this.height,
-				borderRadius: this.radius,
-				...this.styles
-			};
+import imageCache from '@/utils/imageCache.js';
 
-			// 查找获取图片缓存
-			this.fnGetImageCache();
-		},
-		methods: {
-			// 查找获取图片缓存
-			async fnGetImageCache() {
-				// #ifdef APP-PLUS
-				var result = await imageCache.getImageCache(this.url, this.fileMd5);
-				if (result) {
-					this.src = result;
-				} else {
-					this.src = this.url;
-				}
-				// #endif
-				// #ifndef APP-PLUS
-				this.src = this.url;
-				// #endif
-			},
-			fnOnLoad() {
-				this.loadStatus = 'success';
-			},
-			fnOnError(e) {
-				this.loadStatus = 'error';
-			}
-		}
-	};
+export default {
+    name: 'cache-image',
+    props: {
+        url: {
+            type: String,
+            default: ''
+        },
+        lazyLoad: {
+            type: Boolean,
+            default: true
+        },
+        loadStyle: {
+            type: Object,
+            default() {
+                return {
+                    backgroundColor: '#ffffff',
+                    color: '#333'
+                };
+            }
+        },
+        loadErrStyle: {
+            type: Object,
+            default() {
+                return {
+                    color: 'rgba(244, 67, 54,1)'
+                    // backgroundColor: 'rgba(244, 67, 54,0.2)'
+                };
+            }
+        },
+        mode: {
+            type: String,
+            default: 'aspectFill'
+        },
+        loadText: {
+            type: String,
+            default: '加载中...'
+        },
+        loadErrText: {
+            type: String,
+            default: '加载失败'
+        },
+        fileMd5: {
+            type: String,
+            default: ''
+        },
+        styles: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '100%'
+        },
+        radius: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            imgStyle: {},
+            loadingImgStyle: {
+                width: '120rpx',
+            },
+            src: '', // 图片地址
+            loadStatus: 'loading'
+        };
+    },
+    computed: {
+        imagesConfig() {
+            return this.$tm.vx.getters().getConfigs.imagesConfig
+        },
+        loadingImgSrc() {
+            return this.$utils.checkImageUrl(this.imagesConfig.loadingGifUrl);
+        },
+        loadingErrorImageSrc() {
+            return this.$utils.checkImageUrl(this.imagesConfig.loadingErrUrl)
+        }
+    },
+    watch: {
+        // 监听图片md5值的变化
+        fileMd5(val) {
+            // 查找获取图片缓存
+            this.fnGetImageCache();
+        }
+    },
+    created() {
+        this.imgStyle = {
+            width: this.width,
+            height: this.height,
+            borderRadius: this.radius,
+            ...this.styles
+        };
+
+        // 查找获取图片缓存
+        this.fnGetImageCache();
+    },
+    methods: {
+        // 查找获取图片缓存
+        async fnGetImageCache() {
+            // #ifdef APP-PLUS
+            var result = await imageCache.getImageCache(this.url, this.fileMd5);
+            if (result) {
+                this.src = result;
+            } else {
+                this.src = this.url;
+            }
+            // #endif
+            // #ifndef APP-PLUS
+            this.src = this.url;
+            // #endif
+        },
+        fnOnLoad() {
+            this.loadStatus = 'success';
+        },
+        fnOnError(e) {
+            this.loadStatus = 'error';
+        }
+    }
+};
 </script>
 
 <style scoped lang="scss">
-	.cache-image-wrap {
-		width: 100%;
-		height: 100%;
-	}
+.cache-image-wrap {
+    width: 100%;
+    height: 100%;
+}
 
-	.img-loading,
-	.img-error {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		background-color: #f2f2f2;
-	}
+.img-loading,
+.img-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background-color: #f2f2f2;
+}
 
-	.img-load-icon {
-		font-size: 36rpx;
-		animation: xhRote 0.8s infinite linear;
-	}
+.img-load-icon {
+    font-size: 36rpx;
+    animation: xhRote 0.8s infinite linear;
+}
 
-	.img-load-text {
-		font-size: 28rpx;
-		margin-top: 8rpx;
-		color: inherit;
-	}
+.img-load-text {
+    font-size: 28rpx;
+    margin-top: 8rpx;
+    color: inherit;
+}
 
-	.img-error {
-		font-size: 28rpx;
+.img-error {
+    font-size: 28rpx;
 
-		&-img {
-			width: 100%;
-			border-radius: 12rpx;
-		}
-	}
+    &-img {
+        width: 100%;
+        border-radius: 12rpx;
+    }
+}
 
-	.img-err-icon {
-		font-size: 36rpx;
-	}
+.img-err-icon {
+    font-size: 36rpx;
+}
 
-	@keyframes xhRote {
-		0% {
-			transform: rotate(0deg);
-		}
+@keyframes xhRote {
+    0% {
+        transform: rotate(0deg);
+    }
 
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-</style>
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>