remarkablemark/html-react-parser

Imgix "s" parameter getting stripped on live NextJS site

davidmatthewcoleman opened this issue · 1 comments

davidmatthewcoleman commented

Expected Behavior

Imgix images should load properly.

Actual Behavior

The "s" or "signed" parameter is stripped. This results in a 403 error from Imgix.

Steps to Reproduce

This only happens on a live site, not localhost so you'll need to test with a live deployment.

  1. Create an Imgix account. The first 1,000 images a month are free. Unlimited bandwidth, unlimited transforms!
  2. Create a source. Take note of your source domain. I'd recommend the web proxy as you can use any image you find online.
  3. Once the source is deployed, go over to the tools tab. In sign image URL use the following structure: https://[source domain]/[any image URL from online]
  4. Click the sign image button and copy the URL.
  5. In NextJS, paste the URL in a regular img tag (not next/image).
  6. Deploy.

The reason for not using next/image is because I'm fetching my data from WordPress. I created a bookmark block for WordPress that uses Imgix. The block's HTML is generated on WordPress, not NextJS.

Reproducible Demo

I have a live site with the problem. (I'm asking for help, not someone to critique my content.)

Environment

  • Version: 4.0.0
  • Platform: NextJS 13, Vercel
  • Browser: Firefox, Chrome, Safari
  • OS: MacOS, iOS, Android

Keywords

Imgix, NextJS, Vercel

davidmatthewcoleman commented

Nevermind, the issue was I had forgotten to set the IMGIX_SIGN_KEY_REMOTE constant in wp-config.php
Whoops.

  • 👍1