Image Source Path Issue in ReactLayout Routing with FlowRouter

help
1

This is likely to be a routing issue. I am currently using React + FlowRouter.

I am having trouble getting an image to display, but only on a route that’s two levels deep. In other words, '/about' works fine but '/category/popular' doesn’t.

The offending route is this:

FlowRouter.route('/category/:catName', {
    action(params) {
      ReactLayout.render(App, { content:
        <CategoryPage categoryName={params.catName} />
      });
    }
  }
);

I’ve put a burger.png in the public folder at the root level of my Meteor app. What’s interesting here is that when I right-click the broken image, I get a path of http://localhost:3000/category/burger.png instead of http://localhost:3000/burger.png which would be the correct one.

How do I override this behaviour?

2

can’t tell you the exact issue without seeing the how you render the image.

But, I assume you are using relative urls. Use absolute urls. Like:

<img src={"/" + imgName + ".png"} />
1 Like
3

Ah stupid me. This was it!