使用 Expo/React Native 和 Next 未显示图像

Question

. Answers to this question are eligible for a +500 reputation bounty. Steven Matthews wants to to this question:

Figure out how to display images in Next alongside Native Base/React Native

So I am trying to use the Native Base Solito starter:

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

This is the first time I've tried to work with Next, and I am trying to get image support with Expo.

Per the Expo documentation:

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

I should be able to just use next-image , which I am doing:

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
      },
    },
  })
)

Despite this, my images are just not displaying in Next. Elements are generated with the styling I am applying to the image elements, but the images themselves are not displaying.

I tried both universal routing import and direct path:

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

As well as several different images uses:

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

None of these images are displayed.

I've tried both the react native image:

https://reactnative.dev/docs/image

As well as the native base wrapped one.

Still nothing.

Any clue what is wrong in my configuration to cause images to not show?

I suspect it's something in my next.config.js

EDIT:

If I add:

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

to my next.config.js, I get the following error:

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

Answer 1

This seems to solve my problem, if I add it to my next.config.js file:

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

Answer 2

I need more information (that I have mentioned as comment) to say the exact solution but I guess two things:

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