Expo/React Native和Next中的图像无法显示

Question

我正在尝试使用Native Base Solito Starter:

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"
/>

这些图片都没有显示。

我尝试了React Native的图片：

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)

- Steven Matthews

---

有任何错误日志吗？ - Ross

@kmoser 没有生成 <img> 标签。可能是由于 React Native Web 的一些奇怪问题？ - Steven Matthews

@ross 没有提及图片的参考。 - Steven Matthews

我不太明白，你想使用ReactNative编写Web代码吗？@StevenMatthews - AmerllicA

@AmerllicA 是的，它被称为React Native Web，Expo可以直接支持它。这是一种越来越常见的工作流程。 - Steven Matthews

Answer 1

这似乎可以解决我的问题，如果我将它添加到我的 next.config.js 文件中：

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

- Steven Matthews

---

这是因为您正在使用next-images插件，它与Next.js静态图像导入发生冲突。请参见https://nextjs.org/docs/api-reference/next/image#disable-static-imports。 - juliomalves

我正在使用几乎与你完全相同的技术栈：React Native Web + NextJS，并且遇到了完全相同的错误。可以确认这个解决方案有效。我还在expo-cli仓库上提交了一个Github问题：https://github.com/expo/expo-cli/issues/4613，这样其他遇到此问题的人也可以找到修复方法。 - Razorshnegax018

Answer 2

我需要更多信息（我已经在评论中提到）才能给出确切的解决方案，但我猜测有两件事：

1. You have used wrong prop to pass the image to the <Image component

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

   Instead of using source use src

2. My second guess is your assets path loading that you have configured in the:

   nextConfig: {
      projectRoot: __dirname,
   

   Maybe you should some additional name to __dirname or use basePath for changing your publicPath of Webpack to correctly load your images in the browser with the correct image address. actually, my second guess is Wrong image path address

- AmerllicA

---

@AmellicA - 你绝对不应该使用"src"代替"source"。这不是纯React。这是React Native Web。它们的工作方式不同。React Native Web的正确属性是"source"。https://reactnative.dev/docs/image我会研究projectRoot作为一个潜在的解决方案。 - Steven Matthews

不要使用 RN Image，改用 Next.js Image，你绝对可以为 Web 使用一个特定的组件，而对于 RN 使用任何东西。 - AmerllicA