【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)
  1. 直訳すると、<img>コンポーネントでエラーが発生しましたということ
  2. エラー発生箇所の情報がのっていなかった
  3. ただ、白飛びしているページにて、図を使用している部分は限られていたので、その辺りを調査
  4. 対応するコードは以下
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;
`;
...省略...

Leave a Reply

Your email address will not be published.

CAPTCHA