likeadmin项目（python版）后台页面装修图片图标不显示问题

1、首页装修，banner、导航、最新资讯列表，图片都不显示的问题

2、个人中心图标不显示问题

3、客服设置，二维码不显示问题

4、底部导航图标不显示问题

以上4个问题在admin项目中都是因为图片url转换问题，而且各个页面的处理逻辑都不统一

解决方法

配置文件admin/src/stores/modules/app.ts，使用统一的图片路径转换方法

getImageUrl方法增加一个判断，这块像用oss、cos之类的图像路径上还会拼接ossDomain，导致图片无法访问

这块做了多个问题场景的逻辑处理，将tabbar.vue、widgets/banner/content.vue 等组件用到的转换都统一做处理

getImageUrl(url: string) {
    if (url && url.startsWith('http')) return url
    if (url && url.includes('/api/static')) return `${this.config.ossDomain}${url}`
    if (url) return `${this.config.ossDomain}` + '/api/static' + url
    return ''
}

app.ts配置完之后，页面装修的最新资讯文章列表里面的缩略图就能正常显示了

配置admin/src/views/decoration/tabbar.vue

解决底部导航按钮图标无法显示问题

getData方法中取selected和unselected地址时判断有问题，对已有的http地址，仍然会加前缀appStore.config.ossDomain+/api/uploads

实际上sever端的资源是static目录下，这里统一用app.ts的getImageUrl方法

const getData = async () => {
    const data = await getDecorateTabbar()
    tabbar.list = data.list.map((item: any) => ({
        ...item,
        link: JSON.parse(item.link),
        //TODO
        selected: getImageUrl(item.selected),
        unselected: getImageUrl(item.unselected)
    }))
    tabbar.style = data.style
}

配置admin/src/views/decoration/component/widgets/banner/content.vue

解决后台页面装修banner不显示的问题

数据库存的路径是/api/static/banner01.jpg

页面提取未做url转换，这里统一用app.ts的getImageUrl方法

import useAppStore from '@/stores/modules/app'
const { getImageUrl } = useAppStore()
const getImage = computed(() => {
    const { data } = props.content
    if (Array.isArray(data)) {
        return getImageUrl(data[0].image)
    }
    return ''
})

配置admin/src/views/decoration/component/decoration-img.vue

解决后台页面装修导航菜单图标无法显示问题

还是图片url路径转换问题，给src使用getImageUrl方法转换

<template>
    <el-image :style="styles" v-bind="props" :src="getImageUrl(src)">
        <template #placeholder>
            <div class="image-slot"></div>
        </template>
        <template #error>
            <div class="image-slot">
                <icon name="el-icon-Picture" :size="30" />
            </div>
        </template>
    </el-image>
</template>

配置admin/src/views/decoration/component/widgets/customer-service/content.vue

给客服设置页面的二维码url也做一个转换

<decoration-img width="140px" height="140px" :src="getImageUrl(content.qrcode)" alt="" />
import useAppStore from '@/stores/modules/app'
const { getImageUrl } = useAppStore()

右侧设置组件，图片不显示及预览图片失败问题

配置admin/src/components/material/picker.vue ， 解决图片不显示问题

将props中excludeDomain的默认值修改为true

或者修改excludeDomain两个用到的逻辑都可以解决

修改handlePreview方法，解决图片查看失败问题

将previewUrl.value = url  修改为 previewUrl.value = getImageUrl(url)

const handlePreview = (url: string) => {
            previewUrl.value = getImageUrl(url)
            showPreview.value = true
        }