I have a img tag that is not loading the image i want when i use a relative src path for my React project. When I do:
//import { ReactComponent } from '*.svg';
import React from 'react';
import firebase from "./firebase.js";
import "./LobbyStyle.css";
import pfp2 from "./images/pfp2.png"
class ImgButton extends React.Component {
constructor(props){
super();
}
render(props){
return (<button style = ><img src = {pfp2} onClick = {this.props.onClick}/></button>)
}
}
class ImgRow extends React.Component {
render(){
var iconlist = this.props.images.map(image =>
<div key = {image} >
<ImgButton onClick = {this.props.onClick} img = {image}/>
</div>
)
return(
<div style=>
{iconlist}
</div>
)
}
}
export default ImgRow;
However when I replace the imported image with a relative path It doesn't load:
//import { ReactComponent } from '*.svg';
import React from 'react';
import firebase from "./firebase.js";
import "./LobbyStyle.css";
//import pfp2 from "./images/pfp2.png"
class ImgButton extends React.Component {
constructor(props){
super();
}
render(props){
return (<button style = ><img src = {"./images/pfp2.png"} onClick = {this.props.onClick}/></button>)
}
}
class ImgRow extends React.Component {
render(){
var iconlist = this.props.images.map(image =>
<div key = {image} >
<ImgButton onClick = {this.props.onClick} img = {image}/>
</div>
)
return(
<div style=>
{iconlist}
</div>
)
}
}
export default ImgRow;
What am i doing wrong? is it necessary to import my images? Here is my file path, as you can see i believe the relative path is correct, since the images folder is in the same folder as my code:
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment