使用 Expo/React Native 和 Next 未顯示圖像

Question

賞金將在 4 天后到期。 此問題的答案有資格獲得+500聲望賞金。 史蒂文·馬修斯想引起更多關注這個問題：

弄清楚如何在 Next 中與 Native Base/React Native 一起顯示圖像

所以我正在嘗試使用 Native Base Solito 啟動器：

https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript

這是我第一次嘗試使用 Next，我正在嘗試使用 Expo 獲得圖像支持。

根據 Expo 文檔：

https://docs.expo.dev/guides/using-nextjs/

我應該能夠使用我正在做next-image ：

const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')

module.exports = withNativebase(
  withImages({
    dependencies: [
      '@expo/next-adapter',
      'next-images',
      'react-native-vector-icons',
      'react-native-vector-icons-for-web',
      'solito',
      'app',
    ],
    nextConfig: {
      projectRoot: __dirname,
      reactStrictMode: true,
      webpack5: true,
      webpack: (config, options) => {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          'react-native$': 'react-native-web',
          '@expo/vector-icons': 'react-native-vector-icons',
        }
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ]
        return config
      },
    },
  })
)

盡管如此，我的圖像只是沒有顯示在 Next 中。 元素是使用我應用於圖像元素的樣式生成的，但圖像本身沒有顯示。

我嘗試了通用路由導入和直接路徑：

import GrayBox from 'resources/images/graybox.png'
import Car from '../../../../packages/app/resources/images/car.png'

以及幾種不同的圖像用途：

<Image
  source={require('../../../../packages/app/resources/images/car.png')}
  style={{ width: 500, height: 750 }}
  alt="test"
/>

<Image
  source={GrayBox}
  key={index}
  style={{ width: 500, height: 750 }}
  alt="test2"
/>

<Image
  source={Car}
  key={index}
  style={{ width: 500, height: 750 }}
  alt="test3"
/>

這些圖像均未顯示。

我已經嘗試過反應原生圖像：

https://reactnative.dev/docs/image

以及原生基地包裝之一。

依然沒有。

任何線索我的配置中有什么問題導致圖像不顯示？

我懷疑它在我的next.config.js中

編輯：

如果我添加：

  plugins: [withImages, withFonts, [withExpo, { projectRoot: __dirname }]],

到我的 next.config.js，我收到以下錯誤：

../../packages/app/resources/images/cart_black.png
TypeError: unsupported file type: undefined (file: undefined)

Answer 1

如果我將它添加到我的 next.config.js 文件中，這似乎解決了我的問題：

plugins: [withImages, [withExpo, { projectRoot: __dirname }]],
  nextConfig: {
    images: {
      disableStaticImages: true,
    },
    ...
    }

Answer 2

我需要更多信息（我在評論中提到過）來說出確切的解決方案，但我猜有兩件事：

1. 您使用了錯誤的道具將圖像傳遞給<Image組件

   import SomeThingPng from '[/someWhere/something.png]'; <Image src={SomeThingPng} // <= Don't use source

   而不是使用source使用src

2. 我的第二個猜測是您在以下位置配置的資產路徑加載：

    nextConfig: { projectRoot: __dirname,

   也許您應該為__dirname一些額外的名稱，或者使用basePath更改您的Webpack的 publicPath，以便使用正確的圖像地址在瀏覽器中正確加載圖像。 實際上，我的第二個猜測是錯誤的圖像路徑地址