在反应中从 javascript 文件加载图像的问题

时间:2021-04-09 11:16:00

标签: javascript reactjs

我在 React 中使用“setInterval”时遇到问题。如果我不使用“setInterval”,没有问题,但是当我使用它时,我的图像不会出现在我的页面上。请帮助。

这是我导入包含图像的 JS 文件的组件:

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './lastricouri.jpg';
import img from './app.js';
import inter from './app.js';


class Logo extends React.Component {
    render() {
        return (
            <div id = 'header-container'>
                <img src ={logo} id='tricouri'></img>
                <img src={inter}></img>
                <div id='btns'>
                    <a href='#' id='logi'>Log In</a>
                    <a href='#' id='signup'>Sign Up</a>
                </div>
                <input type='text' id='txt' placeholder='Ai libertatea de a alege!'></input>
            </div>
        );
    }
}

export default Logo;

这是我的包含图像的组件:

先从'./1.jpg'导入;

import second from './2.jpg';
import third from './3.jpg';
import fourth from './4.jpg';
import fifth from './5.jpg';

let inter = setInterval(() => {
    const tshirts = [first,second,third,fourth,fifth];
        const rndimg = Math.floor(Math.random() * 5);
    
        const img = tshirts[rndimg]; 
},3000);
        
export default inter;

1 个答案:

答案 0 :(得分:0)

SetInterval 返回分配给 inter 变量的唯一间隔 ID。 inter 不包含您的图像源。如果要分配随机图像,请像这样更改代码

let inter;
setInterval(() => {
    const tshirts = [first,second,third,fourth,fifth];
    const rndimg = Math.floor(Math.random() * 5);
    inter = tshirts[rndimg]; 
},3000);

export default inter;