[Support]: Nextjs The panorama can't be loaded error

Arshiash80 commented 1 year ago

What are you trying to do?

I can't get it to work in Next.js. Please help!

Code

import dynamic from 'next/dynamic';
import Image from 'next/image';
import Test_Pano from '../public/Test_Pano.jpg';
const ReactPhotoSphereViewer = dynamic(
  () =>
    import('react-photo-sphere-viewer').then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
);
const Test = () => {
  return (
    <div className="p-10 h-screen">
      <h1 className="text-5xl text-center mb-5">
        TEST - REACT PHOTO SPHERE VIEWER
      </h1>
      {/* 👇 Image loads okay */}
      <Image
        src={Test_Pano}
        width={500}
        alt="360!!"
      />
      {/* ❌👇 panorama can't be loaded error  */}
      <ReactPhotoSphereViewer
        src={Test_Pano.src}
        height={'100%'}
        width={'100%'}
        container={'viewer'}
      ></ReactPhotoSphereViewer>
    </div>
  );
};

export default Test;

Sandbox Link

No response

Library Version

"next": "^13.4.12", "react-photo-sphere-viewer": "^3.4.0-psv5.4.0"

What operating system are you using?

macOS

What browser are you using?

Firefox

Logs

mkubdev commented 1 year ago

Hi @Arshiash80 👋🏻 I'm investigating your issue. Are you using App or Page Router?

Elius94 commented 1 year ago

Thanks a lot @mkubdev

Arshiash80 commented 1 year ago

Thank you for your response @mkubdev🙏 I'm pleased to inform you that I've successfully resolved the issue by updating the security headers in the next.config.js file.

// config
const nextConfig = {
    ...,
    async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: '/:path*',
        headers: securityHeaders,
      },
    ];
  },
  ...
}

// Security header
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
  },
  ...
];

const ContentSecurityPolicy = `
    ...
    default-src img-src 'self' blob: data: ...
    img-src 'self' blob: data: ...
    ...
`

The problem occurred because of a generated blob, and Next.js needed to be informed that it's okay to load an image from a URL starting with "blob:..."

Elius94 / react-photo-sphere-viewer