【问题标题】:Download error or resource isn't a valid image下载错误或资源不是有效的图像
【发布时间】:2020-01-05 20:00:18
【问题描述】:

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

上面传递的图像示例。

【问题讨论】:

  • &lt;img src={require('../Images/logo192.png')} /&gt; 呢?

标签: javascript html css reactjs browser


【解决方案1】:

Logo 是否有效?

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

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

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

    • 为我工作:)
    【解决方案3】:

    确保相关图片未损坏。 例如,图像可能存在并且可以下载,但文件本身已损坏。

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

    【讨论】:

      【解决方案4】:

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

      【讨论】:

        【解决方案5】:

        我没有尝试过,但就我而言,交付的文件(通过 AWS S3),或者可以说,src-URL 的 HTTP 响应具有 MIME 类型 application/octet-stream集,Next.js 不认为这是一个有效的图像。当然应该是image/png

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-04-13
          • 2016-05-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-04-10
          相关资源
          最近更新 更多