[英]Module not found when importing JSX file off github using create-react-app
[英]importing png file in create-react-app is not showing image
我正在使用 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">
<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 不起作用
已解決:圖像的背景是透明的:-|
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.