在react中动态加载图像作为道具
在React中动态加载图像作为道具，可以通过使用动态导入（dynamic import）的方式实现。动态导入是一种在运行时异步加载模块的方法，可以将图像作为模块导入并在需要时动态展示。
以下是一种实现的方法：
- 首先，使用React的useState钩子来定义一个状态变量，用于存储动态加载的图像：
import React, { useState } from 'react';
const MyComponent = () => {
const [image, setImage] = useState(null);
// 在需要时动态加载图像
const loadImage = async () => {
const imageModule = await import('./path/to/image.jpg');
setImage(imageModule.default);
};
return (
<div>
{/* 在需要展示图像的地方使用image变量 */}
{image && <img src={image} alt="道具" />}
{/* 触发加载图像的操作 */}
<button onClick={loadImage}>加载图像</button>
</div>
);
};
export default MyComponent;- 上述代码中，使用
import()函数异步加载图像，并将加载的图像通过useState设置到image状态变量中。 - 当用户点击"加载图像"按钮时，调用
loadImage函数，触发图像的异步加载。 - 当图像加载完成后，通过条件渲染的方式展示图像，只有在
image变量不为空时才渲染<img>标签。
在这个例子中，我们假设图像文件位于项目的./path/to/image.jpg路径下。你可以根据实际情况修改路径和文件类型。
这种动态加载图像的方法在需要根据用户行为或其他条件来加载图像时非常有用，可以优化页面的加载性能和用户体验。
推荐腾讯云相关产品：腾讯云对象存储（COS），提供了可靠、安全、低成本的云端存储服务，适用于存储、备份和归档海量数据。具体产品介绍和文档可以参考腾讯云官方网站：腾讯云对象存储（COS）。
相关·内容
我正尝试在react-native上的屏幕上加载一个图像。图像uri通过props传递到屏幕。
由于某种原因，图像无法加载，我不知道为什么我检查了多个资源，并将图像更改为保存在assets文件夹中的本地图像。
当我尝试动态加载图像时，它将不加载并显示空白图像。文本显示正确。但是，硬编码图像uri加载得很好。请给我建议。
import { SafeAreaView, StyleSheet, View, Text, Image, ActivityIndicator } from 'react-native';
const App = ({imageUri, imageText})
浏览 2提问于2021-02-15得票数 0
我想要的是 var dynamicTagProps1 = {
Tag: "span",
elementAttrs: {
"aria-label": "test",
"role": "test"
}
} as IDynamicTagComponentProps;
var dynamicTagProps2 = {
Tag: "div",
elementAttrs: {
"aria-label": "test2",
&
浏览 14提问于2021-08-10得票数 0
回答已采纳
我有一个父组件，下面的组件在映射函数中动态生成，如下所示：
const renderListing = this.props.listing.map(function(list, index) {
return (
<Listing
key={index}
title={list.title}
totalWorkers={list.totalWorkers}
/>
);
}, this);
在这个<Listing />
浏览 1提问于2017-12-07得票数 10
回答已采纳
我有一个动态加载映像的react组件。映像依赖于一个状态，该状态使用useEffect从后端加载。初始状态为空。
当我更改状态(使用表单中的下拉列表)时，图像将正确显示，但当我重新加载页面时，图像将不会显示出来。
我要做的是在提取完成后重新呈现/延迟组件的呈现(或仅仅是标记)。因此，我使用loading作为指示符，并在fetch返回后更改它在useEffect中的值。
但是，当页面重新加载时，winner的值是undefined，而我没有得到任何图像。
const Winner = () => {
const [winner, setWinner] = useState({"
浏览 11提问于2022-09-20得票数 1
回答已采纳
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
回答已采纳
3回答
不更新HTML画布
、、、
我在DrawingCanvas.jsx中有以下代码：
var _ = require('bower.js').lodash;
var React = require('bower.js').React;
var channel = require('com.js').channel;
var DrawingCanvas = React.createClass({
setCanvasImage: function(){
if(this.props.image != null)
{
//var canvas = Re
浏览 3提问于2015-10-05得票数 3
回答已采纳
假设我有一个位于场景内部的comp (react-native-router-flux)。它让人们选择他们最喜欢的水果。
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MKCheckbox} from 'react-native-material-kit';
var styles = StyleSheet.create({});
export default class PickAFrui
浏览 0提问于2016-11-14得票数 0
我希望每个人都做得很好。
所以，我在LandingPage组件的工具栏组件中有一个汉堡组件。我在汉堡里有个州钩。我通过工具栏使用道具将状态的值传递给LandingPage组件，并最终传递给LandingPage组件。然后，在我的LandingPage组件的各节中有一个三元操作符，当新组件为真时显示一个新组件(称为NavigationMenu)，而在其为false时不显示它。当我单击汉堡包菜单时，我可以看到布尔值正被传递给LandingPage常量。console.logging，但三元运算符似乎没有动态更新布尔值，也没有呈现导航页。
上面是汉堡包吧的工作代码。您可以在控制台中看到传递给Lan
浏览 3提问于2020-01-14得票数 4
回答已采纳
我想我能做到，但我会犯这样的错误：
TypeError: child.constructor.ConvenienceConstructor不是一个函数
我在一页中有一个组件，ala：
//此内容位于html页面中。我的组件读到了这个孩子，但我似乎不能修改它的任何部分。就放它吧。
<MyComponent prop1="somevalue">
<div className="myclass1"> some child content that is dynamic </div>
</MyComponent>
现
浏览 2提问于2015-07-15得票数 0
所以我用背景图像制作了这个组件，但是我需要动态地传递图像URL，这样我就不必手动复制和粘贴每个页面的整个代码。
下面是将图像添加到组件中的当前方法
import Photo from './images/photo-1.jpg'
const Section = styled.section`
background: url(${Photo}) center;
`
我的问题是，如果我想重用这个组件，我不知道如何根据我所在的页面传递自定义的图像值。
我试过了，但它说图像是没有定义的。
const Component = ({image}) => {
retur
浏览 4提问于2020-12-09得票数 0
回答已采纳
我正在做一个反应组件，其中我希望有一个组件有特定的孩子。
例如：
<Toolbar>
<ContentLeft> ...React nodes[] </ContentLeft>
<ContentRight> ...React nodes[] </ContentRight>
</Toolbar>
在实际工具栏组件中，我希望有：
export type ToolbarProps = {
children?: React.ReactNode,
contentLeft: React.ReactNode,
浏览 5提问于2022-06-06得票数 1
我在动态背景图像上有一些问题。我能够看到mobileImage的"image-2.jpg"，但是desktopImage没有加载。我试过根据文档应用一些代码，但是我的代码出现了错误，请看一下并帮助我。
下面是我的代码：
ProjectItem.js
import React from 'react';
import './ProjectItem.scss';
import useWindowWidth from '../../Hooks/useWindowWidth.js';
import desktopImage from &
浏览 2提问于2020-09-24得票数 0
回答已采纳
1回答
获取图像时显示加载屏幕
、、、
假设我把图像存储在AWS桶上，然后用路由器(7页)来响应应用程序。每个页面都有一些指向AWS特定链接的图像。我试着用第三方库预加载它们(比如react递进-图像等等)，但是看到模糊版本看起来不太好，所以我决定显示加载程序而不是像素模糊的图像。但我有不同的风格应用于图像，所以我需要修复加载程序的位置，样式也。现在，我想向您展示一个通用加载程序，而不是呈现的页面，而当图像正在加载时，它将显示该加载程序。当获取具有不同AWS链接的不同页面上的所有图像时，我可以显示我正在使用的React呈现的内容(如这个示例- )。redux，梅v5，打字本。谢谢大家的关注。
浏览 4提问于2022-06-07得票数 0
进入ReactJS之后，我正在构建一个TodoList of TodoList，这是一个由数字ID标识的两级深动态列表，项目扩展了通过api从第三方服务中检索的详细信息。
React组件结构是这样的：
App {
Level0Form,
Level0List [
Level0Item {
Title: "ABC",
Level1Form,
Level1List [
Level1Item {
id: 123, // given initially
u
浏览 3提问于2015-08-20得票数 2
2回答
我在'@fluentui/react-northstar‘库中使用图标组件，如下所示
import { QnaIcon } from '@fluentui/react-northstar'
const Example1 = () => (
<>
<QnaIcon size="large" />
</>
)
现在，我必须动态加载图标组件，当图标名来自于下面这样的支柱时
import React from 'react'
import { Button, TeamCreateIcon
浏览 2提问于2021-03-04得票数 2
我想使用道具创建一个动态输入组件。
这是App.js文件
<TextBox type="text" style="singIn" placeholder="hi there" />
<TextBox type="password" style="singUp" />
这是TextBox.js文件
import React, { Component } from 'react'
class TextBox extends Component {
constructo
浏览 2提问于2019-02-21得票数 0
在reactjs中，如何在道具发生变化时动态更新二维码组件。我正在使用这个npm包：https://www.npmjs.com/package/kjua componentWillMount()函数在第一次加载时工作，但它没有更新，但如果我呈现{this.state.el}，那么我会得到：*react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement])。如果您打算呈现子项的集合，请使用数组。* import Reac
浏览 24提问于2019-01-14得票数 1
回答已采纳
2回答
我在尝试加载来自我的API的图像(以及其他数据)时遇到问题，但它没有出现在手机/仿真器上，它没有加载。 import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import api from '../services/api';
export default function SpotList({ tech }) {
浏览 10提问于2020-07-17得票数 0
1回答
我正在使用 gem，但我在弄清楚如何从资产管道加载图像时遇到了麻烦。
目前我使用.js.jsx.erb扩展来处理这个问题，但据我所知这是非常规的。(我说的对吗？)
有时我只是使用一个空的div，并将div的background-image属性设置为我想要使用的图像。
在使用react-rails时，将图像加载到react组件的最佳方法是什么
浏览 0提问于2018-06-30得票数 3
1回答
我有三个组件，A，B，C。我需要将样式从A组件传递到C组件作为一个道具。在A组件中，我提到了
const customeStyle : Istyle
{
overFlow: 'auto'
}
现在，我需要在组件C中将此属性作为IStyle获取。
在组件中，我作为一个
<A {...this.props.customStyle} />
我已经创建了接口
interface IProps
{
style : IStyle
}
在B组件中
Class B extends React.Component
浏览 2提问于2020-01-11得票数 0
3回答
工具: Reactjs 0.14.0香草通量
由于两个原因，我需要唯一的标识符：
因此，假设我有一个消息列表，如下所示：
[
{
id: 1241241234, // <-----The unique id is kept here
authorName: "Nick"
text: "Hi!"
},
...
]
现在我使用Array.prototype.map()在所有者组件MessageSection中创建组件(MessageListItem)。
function getM
浏览 7提问于2015-11-11得票数 23
回答已采纳
2回答
我正在尝试为我的标记创建一个自定义组件，该组件接受图像源。我无法通过自定义组件显示图像，因为图像不存在，因此找不到
我还意识到图像路径是由GatsbyJS生成的，我不知道如何在标记中检索图像的路径。
我确实有一个包含一些文本的自定义组件，但是我不能对图像做同样的事情。
这里有一个简单的标记，标题和几个词。
index.md
---
title: ToDoApp
---
Hi this is my todoapp app. Below is a bunch of screens
<imageholder src='./screen1.png'></image
浏览 2提问于2019-02-04得票数 4
回答已采纳
我在页脚组件上使用了setTimeOut，但是页脚仍然在所有页面上首先加载。如何确保动态内容在页脚之前加载。 function Footer({ rawdata, theme, locale }) {
const [isFooter, setFooter] = useState(false);
useEffect(() => {
setTimeout(() => setFooter(true), 3000); // let page load first before footer
}, []);
if (isFooter) {
return ()
浏览 10提问于2021-07-06得票数 0
2回答
我试图使用require动态获取图像的目录，但是不起作用
import React from 'react';
import './produto.css'
function Produto({data}) {
const { id, name, price, score, image } = data;
return <div className = 'produto-card-container' key = {id}>
<div className = 'produto-c
浏览 4提问于2021-09-30得票数 0
回答已采纳
1回答
在react中有没有办法保存UI并在以后加载它？
我遇到了几种解决方案，比如将UI状态保存到数据库中，但如果您正在构建动态仪表板或页面构建器，则这种解决方案并不明智。
我们也可以从服务器端或客户端使用，数据应该作为道具传递，但在动态仪表板的情况下，这种解决方案将很难实现。
我是个新手，知道有一个解决方案可以将动态内容保存到文件或数据库中，我会非常高兴。
浏览 0提问于2020-06-02得票数 0
我很难让React Native中的图像按我想要的方式工作。
因为RN中的图像是在单独的线程中进行本机解码的，所以React Native会在每个单独的图像加载后，在不同的时间显示我的组件中使用的图像(背景图像、手柄、旋钮、滑块)，而不是在组件准备就绪时立即显示整个组件。
我使用了require方法来渲染图像：
<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={requi
浏览 64提问于2015-12-15得票数 23
1回答
我正在开发一个React + Redux应用程序，我需要显示一个带有分页数据的数据集。我可能有数千行，但我不希望通过滚动条进行虚拟加载；我需要分页。我通过Ajax调用加载数据。
我可能会使用jqGrid，因为它可以动态加载给定的数据，并为尚未加载的数据显示“虚拟”寻呼机。
我的问题是我如何在React + Redux世界中处理这个问题。
我是否应该在操作创建者中进行Ajax调用，并将获取的数据传递给还原器，使其处于状态，以便订阅Redux存储的组件能够获得它？
或者应该直接在组件中进行Ajax调用？
另外，我应该把查询数据保存在哪里(页码、每页项目数、行总数、排序/分组/过滤信
浏览 5提问于2016-04-04得票数 6
回答已采纳
我正在使用react，现在我想在div中添加一个背景图像。图片网址来自道具。但是没有显示背景，内联css的代码如下所示
import React from 'react'
export default function City(props) {
const image = props.img ;
return (
<div className='col-lg-4 col-md-4 col-sm-10 ' style={{
backgroundImage: `url
浏览 9提问于2022-03-11得票数 0
因此，我试图获取在我的标记文章中定义的图像，当我使用GraphQLi时，查询工作正常，但是在我的JS代码中，它返回错误的图像。
import React, { ReactElement } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';
export const Img = (props: { alt: string; src: string }): ReactEl
浏览 1提问于2021-12-10得票数 1
回答已采纳
在使用Material的React组件中，我拥有以下内容
<ExpansionPanel defaultExpanded>
我需要在逻辑上设置defaultExpanded (例如:如果我只有一个组件实例，我想使用defaultExpanded)。
我可以根据逻辑设置一个名为expanded的变量，如
expanded = ''
if (logic) {
expanded = 'defaultExpanded'
}
...then像这样使用expanded var ..。
<ExpansionPanel {expanded} >
这
浏览 0提问于2018-09-28得票数 0
回答已采纳
我是新来的本地人。当在应用程序中按下前一个按钮和下一个按钮时，图片会发生更改。但是它会等待一段时间，直到图片被加载到屏幕上。因为图像是从火柴库里传来的。当按钮被按下，我想要一个加载图标出现，直到图像被加载。在这种情况下，我不知道如何使用ActivityIndicator。有人能帮我吗？
应用图片：
代码：
import React, { useState } from 'react'
import { Image, Text, TouchableOpacity, View } from 'react-native'
import { StyleSh
浏览 1提问于2021-11-13得票数 0
回答已采纳
2回答
在我的样式块中，我有如下代码
<style lang="scss">
.item {
background: url('~@assets/images/i10.png');
}
</style>
根据我的特定需求，我需要从注入到html页面的javascript变量中加载图像。例如，在来自服务器的index.html文件中，它可能是
itemURL = '/abc/def/def/img.png';
类似于：
<style lang="scss">
.it
浏览 2提问于2020-06-25得票数 0
我的react应用程序中有一个屏幕，在左侧有一个项目列表，在右侧面板上显示所选项目的描述。每个项目都有一组图像(通常是每个项目3到4个图像)。当选择一个项目时，我向后端发出GET请求，以加载该项目的图像。然而，我注意到了巨大的内存增量，似乎每次选择一个项目之前加载的图像都没有从内存中释放出来： ? 我渲染的图像如下： <img src={`data:image/png;base64,${image.fileContent}`}/> 因此，我决定将img标记替换为自定义组件，以查看它们是否正在被卸载。所以我实现了这个组件： export class Image extend
浏览 28提问于2021-03-18得票数 0
我知道这方面有很多问题，但我似乎无法让它发挥作用:我需要从通过路由呈现的子组件中访问“历史记录”。(它接收来自redux容器的道具)。
我需要将历史对象传递给每个路由中呈现的组件，这样我就可以在子组件中使用this.props.history.push('/route')。这个应用程序以前不太动态，所以每个路由都是用component={someComponent}硬编码的；但是我发现在动态地执行路由时，您需要使用render={() => <someComponent />}。
在更改了从component={}到render={() => ...}的
浏览 10提问于2017-09-12得票数 7
回答已采纳
2回答
我想重新加载一个图像在一个静态URL无限期的反应。通过一些搜索，我得出了下面这个不太理想的解决方案。它可以工作，但我想消除闪烁的图像加载。我意识到问题是组件被重新呈现，然后图像加载.我看过几个例子，它们使用两个图像--一个作为占位符，另一个是隐藏的，直到它使用onLoad和setState加载，但它们都假设有有限数量的图像。我如何使这个显示在CardMedia中的最后一个图像，直到新的一个被加载，然后被替换，而不闪烁每5秒？
import React from 'react';
import ReactDOM from 'react-dom';
import
浏览 0提问于2018-04-17得票数 5
回答已采纳
在我的项目中，我希望在链接标记中显示产品图像，这样在单击图像之后，我就可以显示有关产品的详细信息，但是在ProductScreen中使用Link或Navlink之后，我将获得空白页面显示。
HomeScreen.js
import React, { useEffect } from "react";
import Products from "../Product.js";
import { Row, Col } from "react-bootstrap";
import ProductScreen from "./ProductScr
浏览 6提问于2022-06-11得票数 0
我正在尝试呈现一个使用动态路由器路径支柱的组件。我希望mysite.com/something用something支柱加载组件。如果路由是mysite.com/somethingelse，我想用somethingelse支柱加载组件。这是我的密码：
page.js
import { useRouter } from "next/router";
import List from "./List";
function DefaultPage() {
const router = useRouter();
console.log(router.query.
浏览 2提问于2021-04-10得票数 0
1回答
我想创建一个灵活的组件，它将改变图像，如果我拖动鼠标在他身上。
import React, { Component } from "react";
export default class GitLogo extends React.Component {
render() {
return (
<img src={require('../resources/GitHub-Mark-Light-32px.png')}
onMouseOver={e => (e.curr
浏览 5提问于2020-05-05得票数 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
回答已采纳
1回答
Redux图像不会加载
、、、
所以，老实说，这可能是简单的，就像忽略它，盯着它很长时间，并且是新的反应，但在我的部分组件，我加载在我的backgroundImg道具不会加载图像，我无法弄清楚。我的图片在公用文件夹中，代码在src components文件夹中。
另外，我可以在文件中加载图像，而不是当我通过螺旋桨调用它们时
Home.js --这是我调用组件的地方，并试图通过支柱类型加载文件
import React from 'react'
import styled from 'styled-components'
import Section from './Section
浏览 1提问于2021-12-28得票数 0
回答已采纳
1回答
我试图在React中加载本地映像。在之后，我就是这么做的-
<img src={require('../public/images/icon.png').default} />
图片位于我的公用文件夹中的icon.png中，我正在将它写在export default function Home() { return (部分的index.js中。图像是这样呈现的：
我已经将它部署到Vercel中，并在本地进行了测试，因此我不认为这是服务器问题。我也尝试过描述的导入方法。
这里有什么问题，我如何加载本地图像？
浏览 2提问于2022-06-20得票数 0
回答已采纳
1回答
依赖于其他道具的动态道具
、、、
我有一个组件，它只是一个标题和右边的一个图标，这个组件的容器可以是一个按钮、一个锚元素或一个来自react-router-dom的链接元素。 ? 我可以像这样动态地创建容器： import { Link } from "react-router-dom";
// ....
type Props = {
as: "button" | "a" | "Link";
title: string;
icon: string;
};
const ActionItem: React.FC<Props> = ({
浏览 10提问于2021-11-06得票数 1
回答已采纳
1回答
我想优化我的盖茨比网站上的所有图像，并实现我已安装的gatsby-image-plugin。
对于动态映像，我使用的是GatsbyImage组件，一切都很好，这里没有任何问题。
问题是当我想要使用StaticImage组件呈现静态图像时。
这里有一个例子：
import laptop from '@images/laptop.png';
如果我导入图像并以这种方式使用它：
<img src={laptop} alt='laptop' />
该图像在浏览器上显示正确，但如果我尝试这样做：
import { StaticImage } from '
浏览 5提问于2021-07-31得票数 3
回答已采纳
1回答
将道具传递给组件包装器
、、、
我有一个在两个子组件(呈现数据和加载组件)之间切换的高阶组件：，问题是如何将数据组件中发生的加载状态传递给hoc，以便执行条件呈现。
包装器：
function withLoading<Props>(DataComponent: React.FC<Props>, LoadingComponent: React.FC<Partial<Props>>) {
const newComponent: React.FC<Props & { isLoading: boolean }> = (props) => {
con
浏览 4提问于2022-03-01得票数 0
我刚开始使用React，并且已经尝试过构建一个简单的应用程序。此外，我还在其中使用了reactstrap。但是它没有显示我放在public/assets/images文件夹中的图像。我已经尝试过很多次了，也许Media对象可能不兼容。
另外，我动态地呈现图像项，它是一个放置在src/shared/leader.js中的数组。
这是包含数组的leader.js文件，格式为。
{
id: 0,
name: 'Peter Pan',
image: '/assets/images/alberto.png',
designation: &
浏览 4提问于2019-10-24得票数 0
1回答
我已经使用passport.js在我的React中构建了授权，我想在我的App.js文件中获取我的授权路径，以查看用户是否登录到应用程序中，或者是否没有人登录。
为了帮助解决这个问题，我共享了React的App.js文件和Index.js文件的精简版本。
// App.js File
// Import React Libraries, Routes, Container Pages
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
浏览 1提问于2019-04-01得票数 0
1回答
解决了！
componentDidUpdate()是我所需要的！谢谢你帮忙！
这将是一个来自真正反应新手的问题。
组件的想法，我有一个问题，是关于创建一个按钮，行为像网上商店的‘购买’按钮-当点击，该项目被添加到一个‘篮子’，按钮被禁用，但当删除，项目被删除，从列表中删除，按钮应该被启用回来。
关于最后一部分，我有个问题。我决定在wheather条件下启用/禁用每个按钮，它是否在this.props.chosenModulesNames列表中。如果是的话，我正在更新一个状态。它可以很好地将项目添加到列表中，但是删除对我来说有点困难。
到目前为止，我所发现的是，this.props.chosen
浏览 0提问于2018-08-07得票数 0
回答已采纳
我在React JS中有一个基本问题。我有3个标题为(员工，客户和经理)的标签，点击每个标签将切换到相应的视图。假设所有3个选项卡都在相同的TabList组件中(相同的层次结构/级别)
我想使用一个变量在标签文本旁边显示计数。例如..。
员工(3)
客户(5)
经理(2)
是否可以在React中显示静态选项卡文本/名称旁边的动态计数(整数/数字)？计数表示员工或客户等的数量。我可以在每个视图中根据员工或经理等的数量递增计数。我只想知道是否可以将这个动态计数(使用一个变量)与静态选项卡文本/标签连接起来
浏览 3提问于2021-03-12得票数 0
加载器组件： import React, { Component } from "react";
export class Loader extends Component {
state = {
isLoading: true,
};
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false });
}, 500);
}
render() {
return (
<span className=
浏览 11提问于2020-09-09得票数 0
我试图异步加载图像，只有在加载图像时，才能将其显示在一个React应用程序中。
componentDidMount() {
const img = new Image();
img.onload = () => {
this.setState({
originalImage: img,
});
}
img.src = './images/testImage.jpg'
}
render() {
return (
<main>
{
浏览 1提问于2019-07-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
