1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import React, { useEffect, useState } from 'react'
import Image from 'next/image'
import path from 'path'
import { Container } from '@chakra-ui/react'
//import '../../../public/placeholder.png'
export interface OrgImageProps {
src: string
file: string
}
export const OrgImage = (props: OrgImageProps) => {
const { src, file } = props
const [image, setImage] = useState<any>(null)
/* )
* .then((res) => res.blob())
* .then((res) => setImage(res))
* .catch((e) => {
* setImage(null)
* console.error(e)
* })
}, [fullPath]) */
const dumbLoader = ({ src, width, quality }: { [key: string]: string | number }) => {
return `${src}`
}
const homeLoader = ({ src, width, quality }: { [key: string]: string | number }) => {
return `http://localhost:35901/img/${src}`
}
if (src.replaceAll(/(http)?.*/g, '$1')) {
console.log(src.replaceAll(/(http)?.*/g, '$1'))
return (
<Image layout="responsive" loader={dumbLoader} src={src} alt="" width="auto" height="auto" />
)
}
const srcName = src.replaceAll(/file:/g, '')
const dir = path.dirname(file)
const fullPath =
path.isAbsolute(srcName) || srcName.slice(0, 1) === '~' ? srcName : path.join(dir, srcName)
const encodedPath = encodeURIComponent(encodeURIComponent(fullPath))
return (
<Container>
<Image
layout="responsive"
loader={homeLoader}
src={encodedPath}
alt=""
width="100%"
height="100%"
/>
</Container>
)
}
|
