سلام دوستان. شبتون بخیر
من میخوام تو کامپوننت ری اکت، تگ <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.
من راه حلی براش پیدا نکردم. ممنون میشم اگر کسی میدونه چجوری این خطا رو رفع کرد راهنمائی کنه.
درود
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 رو وارد کنید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟