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

li9yvcax 于 2022-12-05 发布在其他

关注(0)|答案(5)|浏览(138)

尝试使用清单中的以下图标时出错：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>

图像通过上面的示例。

css

来源：https://stackoverflow.com/questions/57762747/download-error-or-resource-isnt-a-valid-image

5条答案

按热度按时间

cidc1ykv1#

从public/manifest.json文件中删除以下条目：

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

赞(0）回复(0）举报 2022-12-05

of1yzvn42#

徽标是否为有效项？
logo192.png是一个png文件，当您使用“create-react-app”启动一个react项目时，它会被加载到您的项目中。如果您删除了这个文件，react会尝试搜索资源，但是由于它被删除了，所以无法找到它。
要修复此错误，您必须删除public/index.html与public/manifest.json中对logo192.png得所有引用.

赞(0）回复(0）举报 2022-12-05

eh57zj3b3#

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

赞(0）回复(0）举报 2022-12-05

z0qdvdin4#

请确保有问题的映像未损坏。例如，映像可能存在并且可以下载，但文件本身已损坏。
在照片查看器或编辑器中打开文件进行验证。

赞(0）回复(0）举报 2022-12-05

vxbzzdmp5#

我没有尝试过这种方法，但是在我的例子中，（由AWS S3）发送的文件，或者说，src-URL的HTTP响应，设置了MIME类型application/octet-stream，Next.js不认为这是有效的图像。

赞(0）回复(0）举报 2022-12-05