(React) PNG图像将导入，但不显示
PNG图像将导入，但不显示是因为可能存在以下几种情况：
- 图像路径错误：首先要确保图像文件的路径是正确的，可以通过检查文件路径是否正确来解决该问题。
- 图像加载失败：如果图像文件本身存在问题或者损坏，可能导致加载失败。可以尝试使用其他图像查看器或编辑器打开该文件，以确认文件是否正常。
- 图像显示问题：有时候，图像可能已经成功加载，但由于某些原因无法在页面上显示。这可能是由于CSS样式或其他前端代码导致的。可以检查相关的CSS样式和HTML代码，确保没有覆盖或隐藏图像。
- 兼容性问题：某些浏览器或设备可能不支持某些PNG图像的特定特性或格式。可以尝试将图像转换为不同的格式（如JPEG）或使用其他兼容性更好的图像处理方法。
总结起来，解决PNG图像导入但不显示的问题，可以从以下几个方面入手：检查图像路径、确认图像文件是否正常、检查前端代码和样式、尝试转换图像格式或使用其他兼容性更好的方法。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，适用于存储和处理各种类型的文件和媒体资源。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云内容分发网络（CDN）：加速静态和动态内容的传输，提供更快的访问速度和更好的用户体验。详情请参考：https://cloud.tencent.com/product/cdn
相关·内容
你好，看上去很基本，但我迷路了。
标记在浏览器中显示图像的备选名称，但不显示图像。
这是这部分的图像和代码。
标志是在它的位置，但没有显示的形象标志。
portfolio.js
const educationInfo = {
display: true,
schools : [
{
schoolName : "University of Engineering and Technology, Peshawar",
logo: require("./assets/images/uet
浏览 9提问于2021-07-26得票数 0
回答已采纳
因此，我有一个具有此结构的React应用程序
-MyApp
-public
--images
---Adam.png
---Jane.png
-src
--components
对于我的一个组件，我想显示所有的图像。有没有办法获得我的public/images文件夹中的文件名数组？我知道如何将数组映射到图像列表，但不确定如何首先获得该文件名数组。
浏览 0提问于2020-08-18得票数 0
1回答
我的问题是react不显示任何图像(jpeg、png)或svg文件。我一直在尝试一些不同的技术，比如在图像的src属性内部进行简单的导入，或者使用require()。但我无法解决这个问题，我也试图在不同的文件夹之间移动图像，但也不起作用。我正在使用react和styled-components，下面是我的一些代码：
<Img src={require('../../images/cuervo.png')} alt={alt}></Img>
创建新组件：
import React from 'react'
import { Icon } f
浏览 76提问于2021-02-13得票数 1
我正在尝试在react原生中创建一个组件。
该组件的示例如下：
import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image } from 'react-native'
const MyComponent = ({Text, Image}) => {
return (
<Text>{Text}</Text>
<Image source={require('../..
浏览 10提问于2019-11-26得票数 0
回答已采纳
react native:如何在安卓上设置图片defaultSource。
我已经阅读了React native 1.58文档。我发现图像道具defaultSource只支持iOS。
当网络图像加载错误时，我需要设置默认图像。
我曾经写过这样的代码：
{ ImageUrl?
<Image style={styles.docimg}
source={{uri: ImageUrl}}/>
:
<Image style={styles.d
浏览 0提问于2017-06-20得票数 11
3回答
反应中的图像绘制阵列
、、、、
我需要帮助。我一直在搜索类似的帖子，但都没有解决我的问题(imagesPool.js)
import React from 'react';
const imagesPool = [
{ src: './images/starbucks.png'},
{ src: './images/apple.png'},
{ src: './images/mac.png'}
];
export default imagesPool;
呈现图像(App.js)：
import React from "react";
浏览 5提问于2020-03-03得票数 6
回答已采纳
5回答
我是新的反应，我是遵循一个教程。现在我有以下代码：
index.js：
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(
<App />,
document.getElementById("root")
)
App.js：
import Contact from "./components/Contact"
export default function App() {
return (
浏览 2提问于2022-02-11得票数 2
回答已采纳
2回答
我使用的是，当我点击“打印”按钮时，我想显示加载的图像。但是，当我打印时，图像会呈现两次。
import React from "react";
import phoneLogo from "./images/phone.png";
import {
Document,
Page,
Text,
View,
Font,
StyleSheet,
Image,
} from "@react-pdf/renderer";
const MyDoc = () => (
<Document>
&l
浏览 2提问于2020-05-29得票数 3
回答已采纳
在我的react应用程序中，我尝试在顶部导航栏中显示作为我网站徽标的图像，如下所示：
我在与NavBar.jsx.相同的文件夹中复制logo.png
在NavBar中添加了以下内容
当我浏览http://localhost:9001/时，它会得到正确的显示，但是当我尝试访问内部页面(比如http://localhost:9001/courseware/course/ )时，它会显示破损的图像。
然后我试着换一种方法。我复制了public/images/logo.png中的图像，然后尝试将其显示为：
import logo from "./logo.png";
<img
浏览 2提问于2022-09-27得票数 -1
1回答
我读过很多关于如何在对象数组中存储图像的解决方案。我做了所有的解决方案，但没有一个对我有效。也许我缺了一个石膏？ 图像存储在src文件夹中。 我尝试过export default，但不幸的是它没有解决这个问题。 导出零件(MenuList.js)： import burgerImg from '../images/menu-images/burger-menu2.png'
import pizzaImg from '../images/menu-images/pizza-menu1.png'
import kebabImg from '../image
浏览 35提问于2020-07-12得票数 0
回答已采纳
我在react native.Since中显示了图像列表一些图像没有显示我发现那些没有http://作为前缀的图像没有显示。在这种情况下，我们应该怎么做？
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
对于上面的情况，它是显示的。但不适用于下面的情况
<Image
style={{width: 50, height: 50
浏览 0提问于2017-07-12得票数 0
我在用反应改造一个旧网站。到目前为止一切都很顺利，但是我刚刚做了一个新的组件，它的图像不会显示出来。它们在主类中是可见的，但在组件类中是不可见的。另外，如果我将整个组件粘贴到主类中，图像仍然不会显示。我必须将图像从组件中删除，然后粘贴到其他地方，这样它们才能显示任何内容。
故障部件类看起来像这样..。
import React from 'react';
import rock from '../images/pngs/rock.png';
import none from '../images/pngs/none.png';
import bl
浏览 0提问于2017-09-01得票数 0
回答已采纳
3回答
我是新来的，如果这太基本的话，很抱歉。
我正在尝试在组件Position.jsx上显示一个图像
import React from "react";
import "./Position.css";
const isOperator = val => {
return !isNaN(val) || val === "." || val === "=";
};
export const Position = props => (
<div
className={`button-wrapper $
浏览 5提问于2020-09-17得票数 3
回答已采纳
我有一个react组件，它有一个带有导入名称的道具，其中包含一个图像路径。
在这种情况下，道具值是Ico1。
我需要像这样在img中传递道具：
代码如下：
import React from 'react';
import Ico1 from '../icon1.png';
const MyComp = (props) => <div>
<img src={props.chosenicon} alt="" />
</div>
}
</
浏览 0提问于2018-10-25得票数 5
回答已采纳
我正在制作一个本地的web应用程序，点击，一个新的图像是在src文件夹中创建的。我希望我的网页用新图像的路径更新<img>标签的源。如果我只是动态地更改src，并且没有加载任何映像，那么我可以使用image元素看到传递了正确的路径。(在我开始使用Parceljs之前，这种改变映像的方法起了作用)。
第一个映像只在我导入它时加载。但是，我不知道在应用程序运行时是否可以导入一个新的图像，所以我不能这样更改显示的图像。类似地，我考虑用一个新的图像覆盖旧的映像，但是即使路径没有改变，我也不知道如何更新图像。
我对网络编程很陌生，我想知道我在动态显示某些东西方面是否走错了路。
下面是一个代码
浏览 5提问于2022-01-19得票数 0
我在React-bootstrap carousel中显示图像时遇到问题。旋转木马本身就可以工作。我看到底部的箭头和索引。但是图像就是不能显示出来。当我检查元素并将鼠标悬停在图像组件上时，它工作得很好。图像链接良好，传送带工作正常，但图像不显示。有谁知道解决这个问题的办法吗？这就是我的测试代码。我只是把它放在关于我的部分，以供参考。查看开发工具中的工作传送带和工作图像的图像。 import React from "react";
import "./section.css";
import "../../App.css";
import { u
浏览 44提问于2020-04-08得票数 3
我正在使用map函数构建imagebox，但不知道如何连接两个文件。它不显示图像，它只是显示图像的方向。
import React from "react";
import "../navi.css"
function NaviIcon (props) {
return (
<div id="NaviIcon">
<span>{props.image}</span>
</div>
);
}
export default NaviIcon;
我把这个文
浏览 7提问于2022-09-30得票数 0
回答已采纳
2回答
我有多个图像，而不是像下面这样导入content.js中的每个图像：
import myimg1 from './myimg1.png'
import myimg2 from './myimg2.png'
import myimg3 from './myimg3.png'
import myimg4 from './myimg4.png'
我制作了images.js，然后导入images.js中的每个映像并导出它，这样我就可以在content.js中访问这些图像：
images.js：
import java from '
浏览 0提问于2018-03-13得票数 1
回答已采纳
2回答
因此，我有一个突然不加载本地映像的React.js项目(例如:本地主机上的src={require("../../assets/images/logo/logo-v4.png")} )。正在显示来自外部URL的远程图像。看起来我的仍然正确地加载映像，但是我担心构建和部署我最近的更改来破坏我的live，不管这个问题是什么。我已经尝试过git checkout一个旧的提交，在那里，我知道图像工作正常，但签出也没有显示本地图像。
我尝试删除node_modules、package-lock.json、npm cache clean --force，然后再删除npm install，但
浏览 1提问于2020-11-01得票数 0
回答已采纳
我有这个组件： import React from "react"
import styled from "styled-components"
const SquareIcon = icon => {
return (
<FlexContainer>
<Icon src={icon} />
</FlexContainer>
)
}
const FlexContainer = styled.div`
display: flex;
justify-content: cent
浏览 7提问于2020-04-26得票数 1
我在React的public文件夹中添加了一个图像。现在，当我想显示一个图像-它会显示在一个组件中，但是如果我试图传递它的url并在某些reusable component中显示图像-我发现该图像没有显示在UI中。
有人能帮我吗？
Home.js
import React, { Component } from 'react';
import Cards from './cards';
class Home1 extends Component {
render(){
return(
<div>
<i
浏览 2提问于2020-05-15得票数 1
1回答
在react-native-gifted-chat主页上，有一个包含文本、图像和视频的消息对象示例：
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'htt
浏览 0提问于2019-06-27得票数 0
2回答
所以我试着使用原生基地的Solito初学者：
这是我第一次尝试与Next合作，我正试图获得世博会的形象支持。
根据世博会文件：
我应该能够使用next-image，我正在这样做：
const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
module.exports = withNativebase(
withImages({
dependencies: [
'@expo/
浏览 5提问于2022-07-27得票数 6
我想定位我想要在项目中使用的图像的路径名，但是我找不到图像。我试过这样做：‘../映像/logo.png’，但它显示模块找不到:无法解析。/图像/logo.png‘在'C:\Users\55590i5 D'\Desktop\react-website-v2-master\src\components’‘中
文件，即要访问的logo.png位于public->images>logo.png中，我希望将其导入到src->components->navbar.js中。
浏览 2提问于2021-02-21得票数 0
回答已采纳
2回答
社区。最近，我在React/Next JS站点上遇到了一个非常恼人的bug。
如果我使用src='/static/images/service'/>，我无法显示任何图像。像这样导入和分配路由：import Image1 from "../../static/images/service.png";到js变量也无济于事。
根据下一篇Js文档，所有资产都应该严格存储在根文件夹中的“/static”文件夹中。
奇怪的是，在CSS中使用背景图像可以毫无问题地访问图像
background-image: url("../../static/images/se
浏览 2提问于2019-08-08得票数 0
1回答
我只想问一下如何在nextjs中正确导入图片和视频？我的图像不会加载到嵌套的路由页面上，比如这个-> localhost:3000/about/missionVision它可以在单一路径上工作，比如这个-> localhost:3000/about 这是带有图像的组件的代码，它不会加载到嵌套的路由/页面上。 import React, { Fragment } from "react";
const Banner= () => {
return(
<Fragment>
<header cla
浏览 165提问于2021-08-10得票数 0
回答已采纳
帮助我解决反应js导入图像问题，图像是不工作的，我尝试太多次控制台日志错误图像和文件夹结构。
如果我放入直接的服务器URL，图像是可见的
import React, {Component} from 'react';
import '../assets/css/bootstrap.css';
import '../assets/css/home.css';
import { Meteor } from 'meteor/meteor';
import { render } from '
浏览 1提问于2018-04-02得票数 0
在App.js中的Card组件实例中，我将图像名称作为道具传递。然后，我从Card组件接收它，并将其呈现给DOM。但我的形象并没有在DOM中显示。可能是什么原因？
这是我的App.js
import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
浏览 9提问于2022-01-14得票数 2
回答已采纳
我的守则如下：
import Image from "next/image";
import React from "react";
import { ProcessImg } from "../public/assets/process_img.png";
<Image
className="lg:w-3/5 md:w-1/2 object-cover object-center rounded-lg md:mt-0 mt-12"
src={Proces
浏览 3提问于2022-11-04得票数 -1
我创建了两个文件，我的第一个文件导入了第二个文件。但它不能加载我的本地图像。它显示了这样的图像
为了解决这个问题，我尝试使用require函数，但是当我使用它时，出现了一个错误。
解析错误:意外令牌，预期"，
我是NaviIconList.jsx
import React from "react";
import NaviIcon from "./NaviIcon";
import "../navi.css";
import cart from "./images/shopping-cart.png"
import be
浏览 8提问于2022-09-30得票数 -1
回答已采纳
当我使用这个例子在我的应用程序上实现图像滑块时，我遇到了这个错误。
import React,{Component} from 'react'
import {View,Text,TouchableOpacity, ViewPagerAndroid} from 'react-native'
import Infoslider from 'react-native-infoslider'
export default class example extends Component {
constructor(p
浏览 3提问于2020-01-10得票数 8
回答已采纳
我刚开始反应js，但在将图像路径导入到网页时遇到了困难。我有一个名为assets的文件夹，它有图像，我想在我的项目中使用这些图像，但是当在代码中将其作为输入时，它会显示："ERROR in ./src/containers/Products.jsx 7:0-33 Module not : Error:无法解决‘./../资产/’“
以下是以下代码：
import React from 'react';
import './products.css';
import {Prodfeat} from '../../components'
im
浏览 3提问于2022-09-26得票数 1
我在学习反应。我试图从数组中显示图像和背景图像，但它不起作用。
我得到了下面的输出。
用于图像
<img src="images/system_analysis.png" alt="">
用于背景图像
<div class="proWrapper" style="background-image: url("images/system_analysis.png");"</div>
我需要知道在哪里我必须使用require作为我的图像。我试图在数组中使用它，但它不起作用。
imgIco
浏览 2提问于2020-04-13得票数 0
回答已采纳
我正在学习React，并且面临着一个问题，我无法引用我在其中的图像。在我的代码目录中，我有src文件夹，其中有组件和图像目录。在组件中，我有一个名为Header.js的组件，我试图访问src/images目录中的图像，但没有显示出来。我有很多图像要显示，我不确定如何实现这一点。 <div className="brand">
<img
className="logo"
src=
浏览 21提问于2019-03-09得票数 1
我正在使用Reactivewithpixi.js开发一个简单的网络游戏
我想从本地目录向pixi.js添加一些图像
这是我研究过的网站
这是密码
import * as PIXI from 'pixi.js'
import React from 'react'
export default class PixiTestPage extends React.Component{
componentDidMount(){
//Create a Pixi Application
const app = new PIXI.Ap
浏览 6提问于2020-05-24得票数 2
回答已采纳
我有以下组件位于“project文件夹/src/page/Home.js”中：
import React from "react";
import MenuButton from "../components/Home/MenuButton";
import menuicon from "images/menuicon.png";
export default function Home() {
return (
<div className="container">
<div clas
浏览 1提问于2020-06-01得票数 1
回答已采纳
1回答
我无法显示标题的背景图像。 我是否必须给出相对于组件所在位置的文件路径，或者只是在jsx文件中导入图像并在那里设置url？我两个都试过了，但我可能做错了。有什么建议吗？ 这是我试图为其设置标题背景图像的组件。 import React, { Component } from 'react';
import { Typography, Button } from '@material-ui/core';
import { header, images } from '../../datamodel/configItems/ComponentRendera
浏览 27提问于2019-06-04得票数 2
回答已采纳
3回答
图像源找不到图像
、、、
我试图在React组件中添加一个图像，但由于某种原因，总是会显示备选文本。
这就是我在Navbar组件中获取图片的方式。
<img src="../assets/images/nav_logo.png" alt="Petapilot" className="site-logo"></img>
这是我的项目结构
我的路错了吗？
浏览 5提问于2021-06-07得票数 0
回答已采纳
1回答
Props.img不显示
、、、
这是我在App.js中的代码
import React from “react”;
import Navbar from “./components/Navbar”
import Hero from “./components/Hero”
import Card from “./components/Card”
export default function App(){
return(
<div>
<Navbar />
<Hero />
<Card
img="./images/katie.png&#
浏览 6提问于2022-09-10得票数 1
回答已采纳
我想在我的“卡片”组件中呈现一个图像，它从道具中获取图像url，但是图像不会显示。我用npx创建了react应用程序，图像在src/映像中，卡组件在src/components中。卡组件：
import React from 'react'
export default function Card(props) {
return (
<section className='card'>
<img/>
<div className='card--info'>
浏览 7提问于2022-04-26得票数 0
回答已采纳
1回答
我正在做一个使用React的项目。这是我的项目的文件结构
公共index.html
App.jsimages facebook.pngimage.PNGlinkedin.pngprofile.pngtwitter.png src
- Profile Intro
- profileIntro.js
- data
- data.js
在我的App.js中，我将导入data.js文件并将从中获得的数据传递给子组件profileIntro，js作为支柱。
这里是data.js
const user = [
{
id: 1,
name: &#
浏览 1提问于2020-10-11得票数 0
2回答
我在一个文件夹中有图像，而其中一个图像很容易导入，而另一个图像却找不到
import img from '../Img/a292.jpg';
// import img from '../Img/building5.png';
export default function First() {
return (
<section id="first" className="d-flex justify-content-center align-items-center">
浏览 0提问于2020-08-12得票数 2
回答已采纳
1回答
在React中:我无法从我的CSS文件加载背景图像。通过研究，我了解到我应该将图像文件夹放在src文件夹中，而不是公共文件夹中。所以我移动了我的图像文件夹。我的CSS文件中的背景图像现在可以工作了，但React找不到任何其他图像，就像以前一样。
我有这样的代码：
setImage(`./images/${temp.img_bg}`);
和
<img src="/images/logo.png" alt="Logo" />
我尝试了不同的路径，但都无济于事。
浏览 4提问于2021-09-15得票数 0
我对本机的反应非常陌生，我正在尝试将一个图像导入我的应用程序，但是我一直收到这个错误：
InvalidCharacterError:在'createElement‘上执行’createElement‘失败:提供的标记名('/static/media/logo.ab75c327.png')不是有效的名称。
这是我现在的代码：
import React from 'react';
import {Text, View, Image} from 'react-native';
import style from './styl
浏览 1提问于2020-12-27得票数 2
1回答
如果有人能让我知道我是否使用了不正确的格式，以便在react上加载图像，那就太棒了！我不是专家，任何建议都非常感谢--提前谢谢你。当我运行代码时，填充的图像只显示一个损坏的img图标，而当我尝试通过终端运行时，它显示图像已调用但未加载。 import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
impo
浏览 17提问于2020-12-23得票数 0
如何在React Application的localhost中显示json文件中的图像？我试着把它调到1以下，但它不工作。
json文件：
{
"img":"images/img-filename.png"
}
图像位于src/images/img-filename.png
在React应用程序中，正在显示图像路径: images/img-filename.png
浏览 0提问于2019-05-14得票数 0
3回答
大家好，Source和Style的类型应该是什么？ 源将包含图像文件的位置。像这样的东西 source = require('../../../assets/user.png') style将有一个样式对象，但不确定我写的style: Object是否正确。 export interface AvatarProps {
source?: any; <<<<< Don't want to use any
style?: any; <<<<< Don't want to use an
浏览 69提问于2021-01-12得票数 1
回答已采纳
我试图通过使用url-加载程序/文件加载器将图像文件导入到我的React组件中。我没有发现任何错误，但是图片没有显示。
当我复制图像的地址时，我得到以下信息：
data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI3NTg5MmMyNDc4ODhiYzVhMmVkNDgyODhiNzQzZTg4Ni5wbmciOw==
下面是我的webpack.config的样子：
...
module: {
rules: [
...,
{
test
浏览 0提问于2018-09-27得票数 1
回答已采纳
1回答
我正在使用Create React App使用React DOM Server进行服务器端渲染。我正在尝试加载静态图像，但它没有显示在我的浏览器中。下面是我的app.js代码
import './App.css';
import React from "react";
import Pic from './Images/pic.png'
function App() {
return (
<div className="App">
<img src={Pic} />
<
浏览 3提问于2020-12-12得票数 0
我有一个react组件，需要从父Play组件获取背景图像，而不是在样式表中设置。我试图将它作为一个支柱传递给组件，但不太确定如何使其工作：
主组件
import React from 'react'
import ReactDOM from 'react-dom'
import DeviceBlock from '/DeviceBlock/DeviceBlock'
const Play = {
init() {
const container = document.getElementById('blocker-contai
浏览 0提问于2018-04-09得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
