javascript - Images not showing with ExpoReact Native and Next - Stack Overflow

admin管理员组

文章数量:1427478

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

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:

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

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

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

https://github./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)

• javascript
• reactjs
• react-native
• next.js
• expo

Share Improve this question Follow edited Jul 31, 2022 at 21:45 Steven Matthews asked Jul 27, 2022 at 17:53 Steven MatthewsSteven Matthews 11.4k5050 gold badges137137 silver badges255255 bronze badges 12

• What is the final generated <img> tag in the browser? Does an image file exist at that URL? Is it readable by the server process? – kmoser Commented Jul 30, 2022 at 1:05
• are there any error logs? – Ross Commented Jul 30, 2022 at 1:14
• @kmoser No <img> tag generated. Maybe some weirdness due to React Native Web? – Steven Matthews Commented Jul 30, 2022 at 21:23
• @ross None that reference the images – Steven Matthews Commented Jul 30, 2022 at 21:23
• I haven't understood, you want to code in web by using ReactNative? @StevenMatthews – AmerllicA Commented Jul 31, 2022 at 8:51

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 4

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

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

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

   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

本文标签： javascriptImages not showing with ExpoReact Native and NextStack Overflow