下载错误或资源不是有效的图片

时间:2019-09-02 21:15:16

标签: javascript html css reactjs browser

尝试从清单中使用以下图标时出错:http://localhost:3000/logo192.png(从控制台下载错误或资源不是有效的图像)?

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

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

上面通过图像的示例。

4 个答案:

答案 0 :(得分:4)

manifest.json 文件中删除以下条目:

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

答案 1 :(得分:0)

徽标是有效项目吗?

logo192.png是一个png文件,当您使用“ create-react-app”启动react项目时,该文件会加载到您的项目中。如果删除此文件,则react将尝试搜索该资源,但由于该资源已被删除,因此无法找到它。

要纠正该错误,您必须删除public / index.html和public / manifest.json中所有对logo192.png的引用。

答案 2 :(得分:0)

确保所讨论的图像未损坏。 例如,该图像可能存在并且可以下载,但是文件本身已损坏。

在照片查看器或编辑器中打开文件进行验证。

答案 3 :(得分:0)

从 manifest.json 文件中删除以下条目,

{
  "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"
    }