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

- 2 هفته پیش
توسط مونا آپدیت شد
مونا ( 570 تجربه )
3 هفته پیش
تخصص : علاقه مند به برنامه نویسی

سلام دوستان. شبتون بخیر
من میخوام تو کامپوننت ری اکت، تگ <img/> اضافه کنم. به این صورت هم تعریف کردم:

import image1 from '../public/image/dadeh1.png';
import image2 from '../public/image/ashya1.png';
import image3 from '../public/image/tarhe-kolli1.png';

<img src={image1} alt="" onClick={this.handleClick} className="imgStyle"/>
          <img src={image2} alt="" onClick={this.handleClick} className="imgStyle"/>
          <img src={image3} alt="" onClick={this.handleClick} className="imgStyle"/>

خطای زیر رو نشون میده:
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.

من راه حلی براش پیدا نکردم. ممنون میشم اگر کسی میدونه چجوری این خطا رو رفع کرد راهنمائی کنه.

پایان جهان ( 71428 تجربه )
3 هفته پیش
تخصص : بیکار برنامه نویس
علی بیات ( 191997 تجربه )
3 هفته پیش
تخصص : توسعه دهنده ارشد وب

درود

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" />
مونا ( 570 تجربه )
3 هفته پیش
تخصص : علاقه مند به برنامه نویسی

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

مونا ( 570 تجربه )
2 هفته پیش
تخصص : علاقه مند به برنامه نویسی

دوستان راه حل دیگه ای دارید برای این مشکل؟
من هم تو 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>

    )
  }
}
مونا ( 570 تجربه )
2 هفته پیش
تخصص : علاقه مند به برنامه نویسی

این خظا رو هم نشون میده:
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'}
برای ارسال پاسخ باید وارد سایت شوید