مونا
5 سال پیش توسط مونا مطرح شد
6 پاسخ

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

سلام دوستان. شبتون بخیر
من میخوام تو کامپوننت ری اکت، تگ <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.

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


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 5 سال پیش مطرح شد
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
0

درود

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" />

مونا
تخصص : علاقه مند به برنامه نویسی
@mona.hagh 5 سال پیش مطرح شد
0

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


مونا
تخصص : علاقه مند به برنامه نویسی
@mona.hagh 5 سال پیش مطرح شد
0

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

    )
  }
}

مونا
تخصص : علاقه مند به برنامه نویسی
@mona.hagh 5 سال پیش مطرح شد
0

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

حامد غفاری
تخصص : برنامه نویس
@حامد ۷۴ 2 سال پیش مطرح شد
0

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام