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

This commit is contained in:
小莫唐尼 2024-07-15 18:40:27 +08:00
parent da141ae10a
commit 62992b2688
2 changed files with 209 additions and 208 deletions

View File

@ -2,10 +2,10 @@
* markdown配置 * markdown配置
*/ */
import { import {getAppConfigs} from '@/config/index.js'
getAppConfigs
} from '@/config/index.js'
import HaloTokenConfig from '@/config/token.config.js' import HaloTokenConfig from '@/config/token.config.js'
import utils from '@/utils/index.js'
export default { export default {
domain: HaloTokenConfig.BASE_API, domain: HaloTokenConfig.BASE_API,
tagStyle: { tagStyle: {
@ -95,6 +95,6 @@ export default {
}, },
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;', 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, loadingGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingGifUrl),
emptyGif: getAppConfigs().imagesConfig.loadingEmptyUrl, emptyGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingEmptyUrl),
} }

View File

@ -16,8 +16,9 @@
</template> </template>
<script> <script>
import imageCache from '@/utils/imageCache.js'; import imageCache from '@/utils/imageCache.js';
export default {
export default {
name: 'cache-image', name: 'cache-image',
props: { props: {
url: { url: {
@ -30,7 +31,7 @@
}, },
loadStyle: { loadStyle: {
type: Object, type: Object,
default () { default() {
return { return {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
color: '#333' color: '#333'
@ -39,7 +40,7 @@
}, },
loadErrStyle: { loadErrStyle: {
type: Object, type: Object,
default () { default() {
return { return {
color: 'rgba(244, 67, 54,1)' color: 'rgba(244, 67, 54,1)'
// backgroundColor: 'rgba(244, 67, 54,0.2)' // backgroundColor: 'rgba(244, 67, 54,0.2)'
@ -64,7 +65,7 @@
}, },
styles: { styles: {
type: Object, type: Object,
default () { default() {
return {}; return {};
} }
}, },
@ -96,10 +97,10 @@
return this.$tm.vx.getters().getConfigs.imagesConfig return this.$tm.vx.getters().getConfigs.imagesConfig
}, },
loadingImgSrc() { loadingImgSrc() {
return this.imagesConfig.loadingGifUrl; return this.$utils.checkImageUrl(this.imagesConfig.loadingGifUrl);
}, },
loadingErrorImageSrc() { loadingErrorImageSrc() {
return this.imagesConfig.loadingErrUrl return this.$utils.checkImageUrl(this.imagesConfig.loadingErrUrl)
} }
}, },
watch: { watch: {
@ -142,50 +143,50 @@
this.loadStatus = 'error'; this.loadStatus = 'error';
} }
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.cache-image-wrap { .cache-image-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.img-loading, .img-loading,
.img-error { .img-error {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.img-load-icon { .img-load-icon {
font-size: 36rpx; font-size: 36rpx;
animation: xhRote 0.8s infinite linear; animation: xhRote 0.8s infinite linear;
} }
.img-load-text { .img-load-text {
font-size: 28rpx; font-size: 28rpx;
margin-top: 8rpx; margin-top: 8rpx;
color: inherit; color: inherit;
} }
.img-error { .img-error {
font-size: 28rpx; font-size: 28rpx;
&-img { &-img {
width: 100%; width: 100%;
border-radius: 12rpx; border-radius: 12rpx;
} }
} }
.img-err-icon { .img-err-icon {
font-size: 36rpx; font-size: 36rpx;
} }
@keyframes xhRote { @keyframes xhRote {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -193,5 +194,5 @@
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>