ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix sharing imgproxy link directly

This commit is contained in:
keyan 2024-05-06 12:53:31 -05:00
parent ce9e146a06
commit 051cb69f5e
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/image.js
View File

@ -65,7 +65,7 @@ function ImageOriginal ({ src, topLevel, rel, tab, children, onClick, ...props }
function ImageProxy ({ src, srcSet: { dimensions, ...srcSetObj } = {}, onClick, topLevel, onError, ...props }) { function ImageProxy ({ src, srcSet: { dimensions, ...srcSetObj } = {}, onClick, topLevel, onError, ...props }) {
const srcSet = useMemo(() => { const srcSet = useMemo(() => {
if (!srcSetObj) return undefined if (Object.keys(srcSetObj).length === 0) return undefined
// srcSetObj shape: { [widthDescriptor]: <imgproxyUrl>, ... } // srcSetObj shape: { [widthDescriptor]: <imgproxyUrl>, ... }
return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url], i, arr) => { return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url], i, arr) => {
// backwards compatibility: we used to replace image urls with imgproxy urls rather just storing paths // backwards compatibility: we used to replace image urls with imgproxy urls rather just storing paths
@ -79,7 +79,7 @@ function ImageProxy ({ src, srcSet: { dimensions, ...srcSetObj } = {}, onClick,
// get source url in best resolution // get source url in best resolution
const bestResSrc = useMemo(() => { const bestResSrc = useMemo(() => {
if (!srcSetObj) return src if (Object.keys(srcSetObj).length === 0) return src
return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url]) => { return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url]) => {
if (!url.startsWith('http')) { if (!url.startsWith('http')) {
url = new URL(url, process.env.NEXT_PUBLIC_IMGPROXY_URL).toString() url = new URL(url, process.env.NEXT_PUBLIC_IMGPROXY_URL).toString()
@ -107,7 +107,7 @@ function ImageProxy ({ src, srcSet: { dimensions, ...srcSetObj } = {}, onClick,
) )
} }
const Image = memo(({ className, src, srcSet, sizes, width, height, bestResSrc, onClick, onError }) => { const Image = memo(({ className, src, srcSet, sizes, width, height, onClick, onError }) => {
const style = width && height const style = width && height
? { '--height': `${height}px`, '--width': `${width}px`, '--aspect-ratio': `${width} / ${height}` } ? { '--height': `${height}px`, '--width': `${width}px`, '--aspect-ratio': `${width} / ${height}` }
: undefined : undefined
@ -116,7 +116,7 @@ const Image = memo(({ className, src, srcSet, sizes, width, height, bestResSrc,
<img <img
className={className} className={className}
// browsers that don't support srcSet and sizes will use src. use best resolution possible in that case // browsers that don't support srcSet and sizes will use src. use best resolution possible in that case
src={bestResSrc} src={src}
srcSet={srcSet} srcSet={srcSet}
sizes={sizes} sizes={sizes}
width={width} width={width}