私のイメージ要素とのソースの問題と反応

Question

まあまあね。この時計が写真で機能するようにしようとしています。私はそれ以上のものを持っていますが、もし私がその人を得ることができれば、私は他人を扱うことができます。多くの検索の後、属性内で文字列補間を使用できないことがわかりましたが、試したことを示すためにそこに保管しました。 2番目は「うまくいく」と思っていますが、私が試している変数やpic0、pic1などが表示されますが、実際のアプリケーションでは実際にインポートしているモジュールではありませんしかし、質問に簡潔にするためにそれらを切る。どのような援助??私は私の頭をバッシングしていますこれは、それは、SRCが表示されない画像は「変数である何私が見ているある

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> 
     ); 
     } 
    } 

この問題を引き起こしているもの「イムが上にインポートするが、私の専門用語が間違っている場合、実際に私はこれを明確にかなり新たなんだ、その変数/モジュールごめん呼び出していないです。

すべての援助をありがとう!!!!このものの

Answer 1

は、この記事の将来の訪問者のために、コメントで明らかにした - あなたは直接インポートした画像を参照する必要があります。

import pic from './myImage'; 

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

それが可能な状態、または他のいくつかの変数に配置することができますが、

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