Quelle Problem mit meinem Bildelement und reagieren

Question

In Ordnung hey Leute. Versuchen Sie, diese Uhr mit den Bildern zu funktionieren. Ich habe mehr als nur den einen, aber wenn ich den einen herausfinden kann, kann ich mit den anderen umgehen. Nach langem Suchen habe ich herausgefunden, dass Sie keine String-Interpolation innerhalb eines Attributs verwenden können, aber ich habe es dort behalten, um zu zeigen, dass ich es versucht habe. Der zweite sollte "funktionieren" und zeigt die Variable, die ich versuche, oder pic0, pic1 und so weiter, aber es ist ein String, nicht das eigentliche Modul, das ich oben importiere (in der eigentlichen App habe ich sie alle importiert sondern schneiden sie auf die Frage der Kürze nach unten. Jede mögliche Unterstützung ?? ich meinen Kopf bashing was dieses Problem verursacht

import React, { Component } from 'react'; 
import './App.css'; 
import './bootstrap-3.3.7-dist/css/bootstrap.min.css'; 
import pic0 from './0.png'; 

export default class Clock extends Component { 
    constructor(props) { 
    super(props); 
    this.incrementTime = this.incrementTime.bind(this); 
    this.dayInWords = this.dayInWords.bind(this); 
    this.state = { 
     clock: new Date(), 
     day: (new Date()).getDay(), 
     hours0: 0, 
     minutes0: 0, 
     seconds0: 0, 
     hours1: 0, 
     minutes1: 0, 
     seconds1: 0 
    } 
    } 


    componentWillMount() { 
    let intervalTimer = setInterval(this.incrementTime, 1000); 
    } 

    componentWillUnmount() { 
    clearInterval(this.state.intervalTimer); 
    } 

    incrementTime() { 
    this.setState(currentState => { 
     return { 
     clock: new Date(), 
     seconds1: ((new Date()).getSeconds())%10 
     }; 
    }); 
    } 
    render() { 
    return(
     <div className='panel-body imgContainer'> 
      <img src={pic0} alt='the digit 0' /> 
      <p>Know this one doesnt work but kept here to show I tried it</p> 
      <img src={`pic${this.state.seconds1}`} alt='seconds1' /> 

      <p>I think this should work and the src is what I want as the variable that im importing at the top but its just a string not the variable.</p> 
      <img src={'pic' + this.state.seconds1} alt='seconds1' /> 

      <p>This is the end goal im trying to accomplish but im trying to see if it can be done using this.state.seconds so its kind of "dynamic" and the source changes every second thus changing the image</p> 
      <img src={pic0} alt='seconds1' /> 
     </div> 
     ); 
     } 
    } 

das ist, was ich sehe, es ist das Bild nicht das src zeigt die „Variable "im an der Spitze zu importieren, aber es ist nicht wirklich nennt diese Variable/Modul leid, wenn meine Terminologie falsch bin ich eindeutig ziemlich neu in diesem.

Danke für die Hilfe !!!!

Answer 1

Obwohl dies wurde in den Kommentaren zu klären, für zukünftige Besucher dieser Post - Sie müssen direkt das importierte Bild verweisen:

import pic from './myImage'; 

// works 
<img src={ pic } /> 

Es kann in den Staat oder eine andere Variable gesetzt werden, kann aber nicht über eine Zeichenkette mit dem gleichen Namen aufgerufen werden:

// Doesn't work 
<img pic={ 'pic' } />