yangzongzhuan / RuoYi-Vue3

:tada: (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
http://ruoyi.vip
MIT License
4.82k stars 1.96k forks source link

图片显示问题 #64

Closed kuiwaiwai closed 1 year ago

kuiwaiwai commented 2 years ago

代码生成器生成前后端,列表内的图片无法显示(这导致了整个列表无法显示),详细错误见下

index.vue:36 

       Uncaught (in promise) TypeError: Cannot read properties of null (reading 'split')
    at ReactiveEffect.fn (index.vue:36:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at get value [as value] (reactivity.esm-bundler.js:1101:39)
    at unref (reactivity.esm-bundler.js:1009:29)
    at Object.get (reactivity.esm-bundler.js:1012:37)
    at Proxy._sfc_render (index.vue:61:1)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5030:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at setupRenderEffect (runtime-core.esm-bundler.js:5156:9)

我尝试将image-preview组件更换为el-image组件,更换后图片是可以正常显示的 自动生成前端代码见下

                   <el-table-column label="照片" align="center" prop="photo" width="100">
                        <template #default="scope">
                            <image-preview :src="scope.row.photo" :width="50" :height="50" />
                        </template>
                    </el-table-column>

更换组件后代码见下

                   <el-table-column label="照片" align="center" prop="photo" width="100">
                        <template #default="scope">
                            <el-image :src="'/dev-api'+scope.row.photo" :width="50" :height="50" />
                        </template>
                    </el-table-column>
kuiwaiwai commented 2 years ago

点击修改,图片上传组件是能够正常显示图片的,但列表里图片却没法正常显示,这让我很疑惑

yangzongzhuan commented 1 year ago

已经修复过的问题,你可以重新拉取最新的代码,null值没有判断引起的。