'Next JS deployed in Vercel, bug backgroundImage property with external URL file

I have in my Next.js project a card component with a backgroundImage from my Strapi API. The image is shown in local but when I deploy my project in Vercel it doesn't show the background image even if the link is ok... I cannot put the image in public folder because I have to get it from Strapi

Someone has an idea why ?

import { getStrapiURL } from "../../../lib/api"

export default function SliderLargeScreen({ index, project }) {
  const backgroundImage = getStrapiURL(
    project.attributes.image.data.attributes.url
  )
  return (
    <div index={index}>
      <div
        style={{
          backgroundImage: `url(${backgroundImage})`,
          height: "350px",
        }}
        className="relative  bg-cover bg-center w-full flex  flex-col rounded-md "
      >

Solution 1:^[1]

Ok, I have fixed my issue, it was a stupid mistake but it can help if somebody has the same error :

I was still testing my app and my backend was on my vps server but whithout ssl certificate, so Vercel didn't want to get pictures with http://upload/.....png instead of https://..... because of security conflict. I installed a SSL certificate on my subdomains and now it's OK ! :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	sebastien pj

'Next JS deployed in Vercel, bug backgroundImage property with external URL file

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]