404 error in console

[Naunis10]

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.

[stepan-twnty]

@Mario-Duarte any news?

[Mario-Duarte]

I can recreate the issue but have not had a chance to look into it.

[stepan-twnty]

@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>

[stepan-twnty]

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]

@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.

[Mario-Duarte]

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.

[stepan-twnty]

@Mario-Duarte done https://github.com/Mario-Duarte/react-image-zooom/pull/16

[Mario-Duarte]

@Mario-Duarte done #16

That's great, I will review it later today when I got a minute

[Mario-Duarte]

This has now been fixed on v1.3.5 npm update react-image-zooom to update to latest version.