Mario-Duarte
404 error in console
When using this component in my app, I noticed an strange error in the console: a call to {pageURL}/null. Looking at the demo page I see a similar error appears there:
Please fix.
@Mario-Duarte I take a look at the code and the problem with
On the first load, src is null and the browser requests this "null". It looks like adding a small guard should resolve the problem
<Figure
id={id}
className={[figureClass, figureZoomed, className].join(" ")}
style={{
backgroundImage: `url( ${zoomed === '0' ? imgData : ''} )`,
backgroundSize: zoom + "%",
backgroundPosition: position,
}}
onClick={handleClick}
onMouseMove={handleMove}
onMouseLeave={handleLeave}
onTouchStart={handleClick}
onTouchMove={handleMove}
onTouchEnd={handleLeave}
>
// Here is guard for preventing null request
{imgData && <Img
id="imageZoom"
src={imgData}
alt={alt}
style={{ opacity: zoomed }}
width={width}
height={height}
/>}
</Figure>
```
hey @Mario-Duarte
I would appreciate it if you check it because due to these issues, I have a lot of problems with my flow.
Thx in advance
@Mario-Duarte I take a look at the code and the problem with
On the first load, src is null and the browser requests this "null". It looks like adding a small guard should resolve the problem
<Figure id={id} className={[figureClass, figureZoomed, className].join(" ")} style={{ backgroundImage: `url( ${zoomed === '0' ? imgData : ''} )`, backgroundSize: zoom + "%", backgroundPosition: position, }} onClick={handleClick} onMouseMove={handleMove} onMouseLeave={handleLeave} onTouchStart={handleClick} onTouchMove={handleMove} onTouchEnd={handleLeave} > // Here is guard for preventing null request {imgData && <Img id="imageZoom" src={imgData} alt={alt} style={{ opacity: zoomed }} width={width} height={height} />} </Figure> ```
This is a recent change that was added to enable dynamically setting the source of the image and this issue is from before this.
hey @Mario-Duarte
I would appreciate it if you check it because due to these issues, I have a lot of problems with my flow.
Thx in advance
I understand the frustration, I will have a look when I can. In the meantime feel free to have a look at the code and open a pull request if you would like to make changes.
@Mario-Duarte done https://github.com/Mario-Duarte/react-image-zooom/pull/16
@Mario-Duarte done #16
That's great, I will review it later today when I got a minute