CODEWITHSUNDEEP
reactjsimagewebpackbuild
Sobia Shahbaz
Sobia Shahbaz

Reputation: 1

image path is wrong after webpack build

I have given path of images in my js file like this image: "/images/mussels.jpg", and imported file in a component in react app. everything looks fine in localhost/3000 but when i uploaded app on web, images path is not right and images are not shown on the web. also when I check in console, there is style attribute empty. but I gave style in ,my css file separately.

This is my SampleFishes.js file with data like this:

const sampleFishes = {
  fish1: {
    name: "Pacific Halibut",
    image: "/images/hali.jpg",
    desc: "Everyones favorite white fish. We will cut it to the 
    size you need and ship it.",
    price: 1724,
    status: "available"
  }

Export default SampleFishes;

Then in Fish component: image is imported via this.props like this below:

<img
  src={this.props.details.image}
  alt={this.props.details.name}
  className="img"
/>;

which are coming through App.js and Samplefishes are imported there like this:

import sampleFishes from "../SampleFishes"; and 

{
  Object.keys(this.state.fishes).map(key => (
    <Fish
      key={key}
      details={this.state.fishes[key]}
      ordkey={key}
      addToOrder={this.addToOrder}
    />
  ));
}

In console.log, HTML element shows image path like this:

<img src="/images/hali.jpg" alt="Pacific Halibut" class="img" style="">

But image on the web is not shown. I have given style in css file to .img className as 

.menu-fish .img {
  float: left;
  width: 150px;
  margin-right: 1rem;
}

Upvotes: 0

Views: 1604

Answers (2)

Sobia Shahbaz
Sobia Shahbaz

Reputation: 1

I figured it out. In build folder, there is index.html file which has path to css like this href="/Shop-Fish/static/css/main.4b89f08f.chunk.css" So that means images will have the path like the same as src="/Shop-Fish/images/prawns.jpg" which in local host case was only src="/images/prawns.jpg" but when it was build for github gh-pages, it attached the repo name with it in all refs and images also needed the same repo name ref first and then images path. So thankyou all who tried to solve my query.

Upvotes: 0

weibenfalk
weibenfalk

Reputation: 892

One guess here is that you have to change your image paths to "./images/mussels.jpg" when you deploy your app to the server. This is my best guess on the little info that we've got here =)

Upvotes: 1

Related Questions