Cordova 错误地解析了 Javascript 执行期间构建的图像元素的路径

Question

我正在尝试使用 Cordova 和 React 构建跨平台应用程序。但是，我很难让应用程序始终如一地从 www 中找到图像，这些图像的路径是在 JSX 中定义的。

设置

我使用 create-react-app 启动了 React 应用程序。
我已经根据需要设置了我的 CSP 和 config.xml <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com file: data: content; media-src *; img-src * 'self' 'unsafe-inline' 'unsafe-eval' file: data: content:; connect-src https://example.com 'self' ws:; font-src https://fonts.googleapis.com https://fonts.gstatic.com 'self'"> 别担心，我会在应用程序正常运行后对其进行限制。

目前调查

应用加载外部图片成功
如果我在 index.html 中设置与 <img src="static/media/my_image.becd5aba.jpg"/> 相同的图像路径，则图像加载正常。
如果我导入图像并将其设置为 JSX 中的 src，它不会加载。
如果我在 JSX 中导入图像和 trim 前导 / 以创建相对路径，它不会加载。
如果我在 JSX 中硬编码相对路径 static/media/my_image.becd5aba.jpg，它不会加载。
使用 Safari 检查器为我的 iOS sim 检查这两个元素给出以下路径
- 显示的图片来自 index.html:
  - index.html 标记中定义的路径 static/media/my_image.becd5aba.jpg
  - 在检查器中找到的路径 file:///Users/anthonymanning-franklin/Library/Developer/CoreSimulator/Devices/SOME-BIG-PATH-STUFF/data/Containers/Bundle/Application/MORE-PATH-GUFF/MyApp.app/www/static/media/my_image.becd5aba.jpg
- 未显示的图像：
  - 在 JSX 中定义的路径 static/media/my_image.becd5aba.jpg
  - 在运行时间呈现的路径 file:///static/media/my_image.becd5aba.jpg

可能的解决方案

Cordova 运行是网络服务器还是我真的在网络视图中浏览文件系统？看起来问题与在文件系统上下文中未正确解析的相对路径有关，因此它查看 file:///static 而不是 file://path/to/application/static/.

我试过以下方法

import myImage from './../../assets/my_image.jpg'

let cordova = window.cordova;
...
<img src={`${cordova.file.applicationDirectory}${myImage}`}/>

但是我收到一个 React 错误

Attempted to update component V that has already been unmounted (or failed to mount).

我想我需要某种有效的方法来在运行时引用 Javascript 中的完整路径。

类似问题

答案有人遇到同样的问题，此页面上接受的答案对我不起作用。

有什么想法吗？

Answer 1

事实证明，解决方案 #2 是正确的。

cordova.file.applicationDirectory 给了我应用程序根目录的正确路径，但它需要以下步骤：

使用 cordova plugin add cordova-plugin-file
确保 <script type="text/javascript" src="cordova.js"></script> 在 index.html

确保您的 React 代码在 deviceready 之后开始。在我的例子中，我将 index.js 设置为以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

document.addEventListener('deviceready', () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
}, false);

然后创建了一个 cordova_globals.js 文件：

let FILE_PATH = '';

document.addEventListener('deviceready', () => {
  FILE_PATH = `${window.cordova.file.applicationDirectory}www`;
}, false);

export {FILE_PATH};

现在在我的 JSX 中，我可以这样引用本地图像：

import {FILE_PATH} from 'cordova_globals.js'

<img src={`${FILE_PATH}${myImage}`}/>

Cordova 错误地解析了 Javascript 执行期间构建的图像元素的路径

Cordova incorrectly resolving paths of image elements constructed during Javascript execution

cordova

reactjs

create-react-app