【React, styled-components】The above error occurred in the componentへの対処

【React, styled-components】The above error occurred in the <img> componentへの対処

エラー内容

Reactとstyled-componentsでデザインを作っていた時のこと
ページを表示しようとしても、真っ白な画面しか表示されない
developer toolにて、内容を確認すると、以下のエラーが発生していた

developer toolのconsole画面

The above error occurred in the <img> component:

    at img
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at Home (http://localhost:3001/static/js/main.chunk.js:8060:86)

直訳すると、<img>コンポーネントでエラーが発生しましたということ
エラー発生箇所の情報がのっていなかった
ただ、白飛びしているページにて、図を使用している部分は限られていたので、その辺りを調査
対応するコードは以下

styled-compornents


...省略...
const HeaderWrapper = styled.img`
  display: flex;
  justify-content: flex-start;
  padding: 8px 32px;
`;

const MainLogoImage = styled.div`
  height: 90px;
`;
...省略...

jsxファイル


...省略...
<HeaderWrapper>
  <Link to='/restaurants'>
    <MainLogoImage src={Mainlog} />
  </Link>
</HeaderWrapper>
...省略...

解決方法

以下のように書き換えることで、エラー解決
imgがあたるべき画像にあたっていなかった
- divでくくった中に、imgがないとこんなエラーになることがわかった

styled-compornents


...省略...
const HeaderWrapper = styled.div` # imgからdivへ
  display: flex;
  justify-content: flex-start;
  padding: 8px 32px;
`;

const MainLogoImage = styled.img` #divからimgへ
  height: 90px;
`;
...省略...