在 create-react-app 中导入 png 文件不显示图像答案

【问题标题】：importing png file in create-react-app is not showing image在 create-react-app 中导入 png 文件不显示图像
【发布时间】：2020-07-31 15:18:27
【问题描述】：

我正在使用 create-react-app，我在 src 文件夹下有一个资产文件夹，并且我在代码中从资产导入了一个 png 文件，但是它没有显示在浏览器上。

我的代码：

    import placeholderImage from "../../assets/placeholder.png";

。 . .

  <Image src={placeholderImage} alt="popular series image"></Image>

图像组件代码：

import React from "react";

const Image = ({ className, ...rest }) => (
    <img {...rest} className={className} />
);

export default Image;

我在浏览器上得到的：

它在 html 上呈现为 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP4AAACQCAMAAAAftiZJAAAAb1BMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+pUA8cAAAAJXRSTlMAAQIDBAUHCAkKCwwNDg8QERIUFRYXGBkaGxwdHh8gISIjJCUmQ2v0nAAAActJREFUeNrt3FtTgkAchnFREkQ8JCB4KE77/T9jhrCAMk1JN+z/+d21d0+uL44zNZsBAAAAAAAAAAAAAADg7+Z+uJuLbU9KpVRmi6y3U3UXyXz17Y97fmlJqrYW+vbH9/61nPZ1XGSO/vFQ5cdy2qvbvtFHm1LM7Q8K1TjoQzeXcvvtq85XsdUdQBm334rb/qt+2s9PKje32Ys+H6eu0hnAsDC2/futXfr9qasf9+2pY2K7U7UPTV3tXcSnuv7UvaXt6dHoJ95t1IanTksMfL+Hw1O3bKeuPglc09pXYf6LqdsplYcr09rdIHsateGpcz3zbv3wqDF17ellYfSzLvxp6lQeeSZGb3uj1ii83qmh7TenzqitOlO3bx+GR8/cK5/I/FTXvdvt1C0uYqauDu5PnRXpt3/iSHj5zwNTd2tfC/kGe/v4qc7LxbQ3t1/M1A09+gRN3TO/Gbs0es1+2r+3zhc7r0mn3G+r0YIpf8MzPv8sO/9CPvnkk08++eSTTz755JNPPvnkk08++eSTTz755JNPPvnkk08++eSTTz755JNPPvnkk/8PluPzJ/0PLK6j8yf958x2PC4+82cAAAAAAAAAAAAAAACCfQEzfP68mfa5CAAAAABJRU5ErkJggg==" alt="popular series image">

但图像未在浏览器上显示。如何解决这个问题？ PS：我可以使用这个组件渲染 svg 文件，只有 png 不起作用

【问题讨论】：

这是什么？试试这个来确认。
我更新为包含 Image 的实现......它基本上是一个 img 标签
如果你改用会怎样？
我已经复制了代码并且正在渲染。可能是图片本身有问题。

标签： javascript reactjs png

【解决方案1】：

解决：图片的背景是透明的：-|

【讨论】：