react: Adding an image tag inside a react component throws error.

While working on an app, I was trying to use an image tag, I thought it was something with my setup, but I stripped everything down to zero, as below.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="./index_bundle.js"></script>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<img src={'/img/logo.png'} alt="vb" />, document.getElementById('app'));

The image renders properly, but I get an error in console that reads

index_bundle.js:659 Uncaught TypeError: Cannot read property '__reactInternalInstance$oz59ctes8c' of null
    at Object.getClosestInstanceFromNode (index_bundle.js:659)
    at findParent (index_bundle.js:19989)
    at handleTopLevelImpl (index_bundle.js:20018)
    at ReactDefaultBatchingStrategyTransaction.perform (index_bundle.js:4017)
    at Object.batchedUpdates (index_bundle.js:19940)
    at Object.batchedUpdates (index_bundle.js:1382)
    at dispatchEvent (index_bundle.js:20098)

Digging into the source, the error is thrown from the following function inside src/renderers/dom/shared/ReactDOMComponentTree.js

/**
 * Given a DOM node, return the closest ReactDOMComponent or
 * ReactDOMTextComponent instance ancestor.
 */
function getClosestInstanceFromNode(node) {
  if (node[internalInstanceKey]) {
    return node[internalInstanceKey];
  }

  // Walk up the tree until we find an ancestor whose instance we have cached.
  var parents = [];
  while (!node[internalInstanceKey]) {
    parents.push(node);
    if (node.parentNode) {
      node = node.parentNode;
    } else {
      // Top of the tree. This node must not be part of a React tree (or is
      // unmounted, potentially).
      return null;
    }
  }

  var closest;
  var inst;
  for (; node && (inst = node[internalInstanceKey]); node = parents.pop()) {
    closest = inst;
    if (parents.length) {
      precacheChildNodes(inst, node);
    }
  }

  return closest;
}

It doesn’t matter where I put the image, inside a component, surrounded by divs, with siblings, alone. Nothing gets rid of this error.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (2 by maintainers)

Most upvoted comments

I couldn’t figure out how to repro the error in a JSFiddle – looked fine when I simply put an img tag in a component.

For anyone who finds this page and has a similar problem, my (hacky) workaround was to replace the img tag with a div and style it to give it a background image.

Qlwentt on Aug 15, 2017

Ok what actually is the fix when images are not displayed in react component using img src tag

Kapil-Vermani on Feb 13, 2018

I can reproduce. Will tag as a bug for now.

gaearon on Aug 3, 2017

I would suggest posting your webpack’d bundle somewhere. I can look what’s up with it.

gaearon on Aug 3, 2017

Can you create a minimal reproducing case that’s ready to run? So that we can exclude bundling issues etc.

gaearon on Aug 2, 2017