Reactのimport?変数?の挙動について

Question

前提・実現したいこと

初心者なのでインポートの仕様などをあまり理解していせん。
Reactを使用して画像を表示しようとしているのですが、思ったとおりに動いてくれません
下記の指定の部分をのようにして動作させたいのですが良い方法はありますか？

console.log(this.props count ) //0
<img src={'img'+this.props.count} />
//この方法だとエラーは出ないけど、画像が表示されない。

or

const url = 'img'+this.props.count;
<img src={url} />
//Parsing error: Unexpected token

該当のソースコード

import React, {Component} from 'react';
import './card.css';
//images
import img0 from '../../img/img0.png';
import img1 from '../../img/img1.png';

export default class Card extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <a href={this.props.url} target="_blank">
        <div className="Card">
          <img src={img0} />　　　←!!!!!ここ!!!!
        </div>
      </a>
    );
  }
}

試したこと

下記のプログラムを使用して静的に画像を読み込むと、Parsing error: Unexpected tokenというエラーが表示される。reactのエラー出力の仕組みがいまいちわからないため(esLint?)、挫折しました。
eslintのさまざまな記事はコンソール操作でのエラーですが私の場合はサーバー起動したときのエラーとして出力されてます。
JSのバージョン違いのことをおっしゃっている記事が多かったので、「eslint-babel」や「prettier」のようなものは入れてみましたが、「.eslintrc」のファイルが見つからず、自分でルートディレクトリに作成してみても動作しているかは定かではありません。

  const url = '${process.env.PUBLIC_URL}/src/img'+this.props.count+'.png';

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こんにちは

一案として、以下のような配列images

//images
import img0 from '../../img/img0.png';
import img1 from '../../img/img1.png';

const images = [ img0, img1 ];  // この行を追加

を作っておいて、

<div className="Card">
  <img src={images[this.props.count]} />
</div>

としてみるのはいかがでしょうか？

参考になれば幸いです。

Comments

[re_refuse]

早急かつ的確な回答をありがとうございます!!!importので格納される側の文字列は意外と柔軟であることを気づくことができました！！
正直配列に入れる書き方をみたとき衝撃を受けましたw
ありがとうございます！

[jun68ykt]

どういたしまして。解決されたようで、よかったです????