1

I'm using react router 4 and trying to link to an image on my page. When I click the link, the image just downloads instead of opening in a new tab or on the same page. Ideally I'd it to open the image on the same page in the browser.

I'm using prismic which is a headless cms to host the content images so I don't believe i have access to the content header to change it. Is there any way I can force this behavior through react or react-router?

    render(){
      return (
        <Wrapper>
          {landscapeList.map((value, index) => (
            <Link key={index} to={value.src} target="_blank">
              <img key={index} src={value.src} />
            </Link>
            ))}
        </Wrapper>
      );
    }

The target blank seems to open a new browser for a moment but then just downloads the image again.

Anyone have any ideas on this one?

Milos
  • 1,073
  • 4
  • 14
  • 33
  • Maybe it works if you just use an ordinary HTML `a` element, because you don't actually need `Link` in this case, due you don't need to manipulate the browser history. – Robin Jan 27 '18 at 19:06
  • yeah even using the a link gives me the same issue – Milos Jan 27 '18 at 19:12
  • Hmm.. Which headers are sent? – Robin Jan 27 '18 at 19:14
  • When i do a get on the link in postman, i get this in the headers section: Accept-Ranges →bytes Cache-Control →max-age=315360000 Content-Disposition →010408537a26f8b9e6d29650edabcf9e3e27b523_4_15615502033_o.jpg Content-Length →257758 Content-Type →image/jpeg – Milos Jan 27 '18 at 19:20

1 Answers1

1

Take out the “_blank” attribute

akiespenc
  • 305
  • 3
  • 8