React-responsive-carousel (nextJS/strapi) 图像未在移动设备上显示

Question

我正在 nextJS/Strapi 网上商店工作，我想使用 react-responsive-carousel 我按照 [ https://www.npmjs.com/package/react-responsive-carousel 上的所有步骤操作].

（我在本地主机上工作）

Carousel 使用来自 Strapi API（单一类型集合）的动态图像在桌面上运行良好，但是当我尝试从那里。来自 Strapi 的所有其他图像都可以正常工作，除了 Carousel 中的图像。

轮播代码：

import { imgToUrl } from "../../utils/urls";
import { Carousel } from "react-responsive-carousel";

const index = ({ data }) => {

  const images = data.slider.map((slide) => imgToUrl(slide.image)); //imgToUrl is a function that takes the image URL and concatinate it with HTTP://localhost:1337/

  return (
    <>
      <Carousel
        autoPlay={true}
        emulateTouch={true}
        infiniteLoop={true}
        showThumbs={false}
        width="100%"
      >
        {images.map((image) => (
          <div className="h-full w-full">
            <img className="w-full h-full" src={image} />
            {/* <p className="legend">Legend 1</p> */}
          </div>
        ))}
      </Carousel>
    </>
  );
};

export default index;

imgToUrl 代码：

export const API_URL =
  process.env.NEXT_PUBLIC_API_URL || "http://localhost:1337";

/**
 *
 * @param {any} image
 *
 */
export const imgToUrl = (image) => {
  if (!image) {
    return "/Products/3.jpg"; //default image when there is not image uploaded
  }
  if (image.url.indexOf("/") === 0) {
    return `${API_URL}${image.url}`; // Concatinates http://localhost:1337 with the image url
  }
  return image.url;
};

imToUrl 的输出：

http://localhost:1337/uploads/banner_3_d93516ad90.jpg

如有任何帮助，我将不胜感激。谢谢。

Answer 1

我还使用 Strapi“无头”CMS 作为我的后端和 GraphQL API 从前端检索数据，下面是我目前如何实现我的“Strapi Media”图像组件：

frontend/utils/media.js

export function getStrapiMedia(url) {
  if (url == null) {
    return null
  }

  // Return the full URL if the media is hosted on an external provider
  if (url.startsWith("http") || url.startsWith("//")) {
    return url
  }

  // Otherwise prepend the URL path with the Strapi URL
  return `${
    process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"
  }${url}`
}

frontend/utils/types.js

import PropTypes from 'prop-types'

export const linkPropTypes = PropTypes.shape({
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  newTab: PropTypes.bool,
})

export const mediaPropTypes = PropTypes.shape({
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  alternativeText: PropTypes.string,
  mime: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
})

export const buttonLinkPropTypes = PropTypes.shape({
  theme: PropTypes.string,
  text: PropTypes.string.isRequired,
  newTab: PropTypes.bool,
})

frontend/components/elements/image.js

import { getStrapiMedia } from "utils/media"
import Image from "next/image"
import PropTypes from "prop-types"
import { mediaPropTypes } from "utils/types"

const NextImage = ({ media, ...props }) => {
  const { url, alternativeText } = media

  const loader = ({ src }) => {
    return getStrapiMedia(src)
  }

  // The image has a fixed width and height
  if (props.width && props.height) {
    return (
      <Image loader={loader} src={url} alt={alternativeText || ""} {...props} />
    )
  }

  // The image is responsive
  return (
    <Image
      loader={loader}
      layout="responsive"
      width={media.width}
      height={media.height}
      objectFit="contain"
      src={url}
      alt={alternativeText || ""}
    />
  )
}

Image.propTypes = {
  media: mediaPropTypes.isRequired,
  className: PropTypes.string,
}

export default NextImage

下面是来自另一个组件上下文的示例用例：

...
import NextImage from "./image"
...
          <div className="flex flex-row items-center">
            <Link href="/">
              <a className="h-8 w-32">
                <NextImage layout="fill" className="image" media={navbar.logo} />
              </a>
            </Link>
          </div>
...

希望这对您有所帮助 - 如果您可以在此处使用更多源代码共享，请告诉我。

我自己正在学习 Strapi 框架，从 Strapi Next Corporate Starter 选择 bootstrap 我的软件工程组合、个人资料和博客网站。您是否也在使用 Strapi bootstrapped 项目，或者使用他们的 SDK 进行自定义？

在处理我自己的自定义 Carousel 时，我还发现如果您将自定义组件实现为部分组件，则需要将导入语句和数组成员添加到 Strapi 默认值中：

frontend/components/sections.js

我的用例示例：

...
import CardCarouselGroup from "@/components/sections/card-carousel-group";
...
// Map Strapi sections to section components
const sectionComponents = {
  "sections.hero": Hero,
  "sections.large-video": LargeVideo,
  "sections.feature-columns-group": FeatureColumnsGroup,
...
  "sections.card-carousel-group": CardCarouselGroup
}
...

React-responsive-carousel (nextJS/strapi) 图像未在移动设备上显示

React-responsive-carousel (nextJS/strapi) images are not showing on mobile

carousel

reactjs

strapi

next.js