mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-19 01:50:15 +09:00
fix: 修复loading图片地址异常问题
This commit is contained in:
parent
da141ae10a
commit
62992b2688
@ -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),
|
||||||
}
|
}
|
@ -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>
|
Loading…
Reference in New Issue
Block a user