1

My goal:

to create a list of trending movies, and to show the trending movies, I will put a thumbnail of the movies with background-image, so it needs to be dynamic.

The problem:

I have a problem when I fetch an Image from my local assets for my background Image. The interesting one is that I can fetch one of my image in my local assets.

My Local Assets location in NextJs located at src/assets/thumbnails For example:

background Image that I can fetch: ../assets/thumbnails/112/regular/small.jpg (https://i.stack.imgur.com/EqnaD.png)

background Image that I can't fetch : ../assets/thumbnails/112/regular/large.jpg](https://i.stack.imgur.com/h4r7A.png)

Here is the code :

export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  const imeg = "../assets/thumbnails/112/regular/large.jpg";
  const test = "bg-[url('" + `${imeg}` + "')]";
  return (
    <div className={`${test} w-[100%] h-[100%]  p-4 rounded-lg`}>
      <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center h-auto">
          <img
            className="w-[100%} h-[100%]"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          ></img>
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          ></MovieDescription>
        </div>
      </div>
    </div>
  );
}

What I've tried:

when I use an "img" tag and I fetch this image "../assets/thumbnails/112/regular/large.jpg". It shows the image.

(https://i.stack.imgur.com/2DhGw.png)

import TheLargeImage from "../assets/thumbnails/112/regular/large.jpg";
export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  const imeg = "../assets/thumbnails/112/regular/large.jpg";
  const test = "bg-[url('" + `${imeg}` + "')]";
  return (
    <div className={`${test} w-[100%] h-[100%]  p-4 rounded-lg`}>
      <img src={TheLargeImage.src} alt="The large Imge"></img>
      {/* <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center h-auto">
          <img
            className="w-[100%} h-[100%]"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          ></img>
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          ></MovieDescription>
        </div>
      </div> */}
    </div>
  );
}
Vincent
  • 21
  • 4
  • String concatenation doesn't work with Tailwind CSS (https://stackoverflow.com/questions/68020378). Manually specify that background image style using `styles` object, Tailwind won't work there. – brc-dd Apr 07 '23 at 06:14
  • You mean like this ?
    It doesn't work if I add the style Object     – Vincent Apr 07 '23 at 06:26
  • Won't work with `imeg`, either store assets in [public directory](https://nextjs.org/docs/basic-features/static-file-serving) and use `imeg = '/assets/....'` or use `TheLargeImage.src`. – brc-dd Apr 07 '23 at 06:29

0 Answers0