اضافه کردن تگ img به react component

درود...
پیوند زیر:
https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

درود

Relative imports outside of src/ are not supported

نوع آدرسی که تعریف کردید از نوع Relative یا نسبی هست.. و این نوع آدرس‌دهی اگر خارج از فولدر src باشه، پشتیبانی نمیشه.. یا از آدرسنوع absolute استفاده کنید یا فایل‌هارو به داخل src منتقل کنید..

به جز روشی که شما استفاده کردید به شکل زیر هم می‌تونید عکس هارو نمایش بدید:

<img src={'../public/image/dadeh1.png'} alt="" onClick={this.handleClick} className="imgStyle" />

و اگر از Webpack استفاده میکنید به شکل زیر:

<img src={require('../public/image/dadeh1.png')} alt="" onClick={this.handleClick} className="imgStyle" />

من هر دو روش رو امتحان کردم بازم نمایش نمیده.

دوستان راه حل دیگه ای دارید برای این مشکل؟
من هم تو webpack قسمت loader، تنظیمات مربوط که فایل های img رو اضافه کردم
یه بار اومدم آدرس رو import کردم و بعد مقدار variable رو به src دادم.
یه بار از طریق backgroundImage آدرس عکس رو دادم، به صورت مستقیم آدرس رو داخل src گذاشتم. با هیچکدوم از این روش ها نشون نمیده.

import React from "react";
import { Bar } from 'react-chartjs';
import Image1 from '../public/image/dadeh1.png';
import Image2 from '../public/image/ashya1.png';
import Image3 from '../public/image/tarhe-kolli1.png'

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      listOne: [],
      listTwo: [],
      showMenuOne: false,
      showMenuTwo: false,
      showChart: false,
      chartData: {}
    }
    this.handleLeftClick = this.handleLeftClick.bind(this);
    this.handleShowChartClick = this.handleShowChartClick.bind(this);
    this.handleRightClick = this.handleRightClick.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
    this.setWrapperRef = this.setWrapperRef.bind(this);

  }

  handleLeftClick(e) {

    let listOneStyle = document.getElementById('listOneStyle');
    let top = (e.pageY + 10) + 'px';
    listOneStyle.style.top = top;
    if (e.nativeEvent.which === 1) {
      fetch('https://api.jsonbin.io/b/5d3edbe435e3f814032c56d2')
        .then(results => {
          return results.json();
        }).then((data) => {
          this.setState({ listOne: data, showMenuOne: true });
        })
    }
  }

  handleRightClick(e) {

    e = e || window.event;
    e.preventDefault();
    let listTwoStyle = document.getElementById('listTwoStyle');
    let left = (e.pageX-170) + 'px';
    let top = (e.pageY - 20) + 'px';
    listTwoStyle.style.left = left;
    listTwoStyle.style.top = top;
    this.setState({ listTwo: this.state.listOne, showMenuTwo: true });

  }
  componentDidMount() {
    document.getElementById('listOneStyle').addEventListener('contextmenu', this.handleRightClick);
    document.querySelector('body').addEventListener("click", this.handleClickOutside, false);
    fetch('https://api.jsonbin.io/b/5d3edfb3ea04da211dc47b65')
      .then(results => {
        return results.json();
      }).then((data) => {
        let region = [], count = [];
        data.forEach((element, index) => region.push(data[index]["category_Region"]));
        data.forEach((element, index) => count.push(data[index]["measure_Order ID_count"]));
        this.setState({
          chartData: {
            labels: region,
            datasets: [
              {
                label: 'population',
                data: count
              }
            ]
          }
        })
      })

  }
  componentWillUnmount() {
    document.querySelector('body').removeEventListener("click", this.handleClickOutside, false);
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.setState({
        showMenuOne: false,
        showMenuTwo: false
      });
    }
  }
  handleShowChartClick(e) {
    if (e.nativeEvent.which === 1) {
      this.setState({
        showChart: true
      })
    }
  }
  render() {
    var listOneStyle = document.getElementById('listOneStyle');
    return (
      <div className="container" id="container" >
        <div className="horizontalMenu">
        </div>
        {this.state.showChart &&
          <Bar
            data={this.state.chartData}
            options={{
              maintainAspectRatio: false,
              scaleShowHorizontalLines: true,
              scaleShowVerticalLines: true
            }}
            width="600" height="250"
            className="barChartStyle"
          />}
        <div className="verticalMenu">
          <img src={Image1} alt="" onClick={this.handleLeftClick} className="imgStyle1" />
          <img src={Image2} alt="" onClick={this.handleLeftClick} className="imgStyle1" />
          <img src={Image3} alt="" onClick={this.handleLeftClick} className="imgStyle1" />
        </div>
        <div className="main" ref={this.setWrapperRef}>

          <ul className="listOneStyle" id="listOneStyle">
            {this.state.showMenuOne && this.state.listOne
              .map(item => (
                <li
                  className="itemsOneStyle"
                  key={item.name}
                  onClick={listOneStyle.which === 3 ? this.handleRightClick() : undefined}
                >
                  {item.name}
                </li>
              ))}
          </ul>
          <ul className="listTwoStyle" id="listTwoStyle">
            {this.state.showMenuTwo && this.state.listTwo
              .map(item => (
                <li
                  className="itemsTwoStyle"
                  key={item.name}
                  onClick={this.handleShowChartClick}
                >
                  {item.name}
                </li>
              ))}
          </ul>
        </div>
      </div>

    )
  }
}

این خظا رو هم نشون میده:
Module not found: You attempted to import ../public/image/ashya1.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

وقتی آدرس رو به این شکل داخل src قرار میدم، خطا نمیده ولی تصویر رو هم نشون نمیده.

src={'../public/image/dadeh1.png'}

سلام
دوست عزیز ابتدا نوع عکس رو بررسی کنید ( روی عکس کلیک راست کنید گزینه اخر بزنید نوع یا همون type بخونید jpg یا png یا ... ) بعد موقع import کردن همون type رو وارد کنید