Question

在我的应用程序中的一些地方，我已经可以从主图像文件夹成功导入图像，如下所示：

import MenuIcon from '../images/menu_burger.png';

但是，我试图创建一个新的通用组件，该组件将是侧面带有按钮的按钮，并且在此组件文件中，我既不能从标准图像文件夹也不能从同一图像导入任何图像。文件夹，因为我将图像的副本放在那里，并尝试加载它以删除../ shenanigans，这是问题的一部分。

import BlankIcon from './blank_icon.png';

错误：捆绑失败：错误：无法从

解析模块./blank_icon.png

`C:\Users\Owner\ReactNativeApps\App\src\components\common\IconButton.js`: The module `./blank_icon.png` could not be found from `C:\Users\Owner\ReactNativeApps\App\src\components\common\IconButton.js`. Indeed, none of these files exist:
  * `blank_icon.png`
  * `C:\Users\Owner\ReactNativeApps\App\src\components\common\blank_icon.png\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`

下面是我最初尝试导入它的方式，虽然没什么不同，但是尝试从C：\ Users \ Owner \ ReactNativeApps \ App \ src \ images \ blank_icon.png拉出图像

import BlankIcon from '../../images/blank_icon.png';

它给出了相同的错误消息，但看上去是

C:\Users\Owner\ReactNativeApps\App\src\images\blank_icon.png location where it fails to find the image (And, again, it does exist there).

我尝试将源更改为网址：

import BlankIcon from 'https://images.pexels.com/photos/34950/pexels-photo.jpg';

但是尝试时遇到的错误是：

error: bundling failed: Error: Unable to resolve module `https://images.pexels.com/photos/34950/pexels-photo.jpg` from `C:\Users\Owner\ReactNativeApps\App\src\components\common\IconButton.js`: Module `https://images.pexels.com/photos/34950/pexels-photo.jpg` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at ResolutionRequest.resolveDependency (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)
    at Object.resolve (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (C:\Users\Owner\ReactNativeApps\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)

npm start -- --reset-cache什么也没做

删除了node_modules folder，并进行了当天的第五次npm安装

我不知道下一步该怎么做，在SO上还有另一篇关于这种事情的文章。我已经尝试过这些答案，就像该帖子上的OP一样，对我没有任何帮助。

React-Native无法导入图像

0 个答案: