Download error or resource isn't a valid image

Question

Getting Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image) from console?

import React from 'react';
import Logo from '../Images/logo192.png';

<div>
<img src={Logo} style={{width: '80px', height: '80px'}} alt='react logo' />
</div>

Example of image being passed through above.

Solution 1

Remove the following entry from the manifest.json file:

{
  "src": "logo192.png",
  "type": "image/png",
  "sizes": "192x192"
},

Solution 2

Is Logo a valid item?

logo192.png is a png file that is loaded into your project when you use "create-react-app" to start a react project. If you delete this file, react will attempt to search for the resource but will not be able to find it since it was deleted.

To fix the error you have to remove all references to logo192.png in public/index.html and public/manifest.json.

Solution 3

Remove the following entry from the manifest.json file,

{
  "src": "logo192.png",
  "type": "image/png",
  "sizes": "192x192"
}

You may also get error for logo512.png, so delete that too,

    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }

Comments

[Naveen Kumar V]

Worked for me :)