WebView拒绝显示图像

Question

WebView拒绝显示图像

ekk*_*kis 5 javascript webview ios react-native

我读过很多关于这个问题的帖子，其中大部分都是旧的，所以我正在创建一个新的帖子，从 React Native v0.61.5 开始

我的问题：我正在检索网页及其引用的文件，将它们写入应用程序的文档文件夹，并尝试将它们加载到 WebView 中。当用户单击按钮并适当设置状态时，会发生这些事件

这是我指示 WebView 的方式：

<WebView 
  source={{html: this.state.html, baseUrl: this.state.baseUrl}}
  originWhitelist={['*']}
  allowFileAccessFromFileURLs
  allowFileAccess={true}
/>

Run Code Online (Sandbox Code Playgroud)

以及文件的内容。请注意，徽标与引用它的文件位于同一目录中：

<h1>per aspera ad astra</h1>
<img src="logo.jpg"/>

Run Code Online (Sandbox Code Playgroud)

我遇到的问题是我看不到图像。它显示为一个小问号的蓝色图像。如果我查看baseUrl，它设置为：

文件：///Users/ekkis/Library/Developer/CoreSimulator/Devices/9F96B01B-3C66-4ABA-96A5-B58049FB9212/data/Containers/Data/Application/735BD192-FC7B-4708-9973-64C3C9953A0D/Documents

...这似乎是正确的。我在 iOS 上运行这个

我也尝试过（如其他地方所建议的）：

  source={require(this.state.uri)}

Run Code Online (Sandbox Code Playgroud)

但这失败了（我收到错误：“Error: TransformError App.js: App.js:第 62 行无效调用：require(this.state.uri)”。这没有什么意义，因为 require 无法读取 HTML 文件，但也许有应该是一些黑魔法，但对我不起作用。我也尝试过简单地设置，uri但它也不起作用（baseUrl在这种情况下我无法设置）

我确信有人已经这样做了。这是该组件的基本情况。我期待任何指导

Answer 1

Ste*_*ven 1

下面是在 iOS 的 Web 视图中使用文件的工作示例。它使用react-native-fsnpm 包在本地下载文件，并使用imageUrl变量定义下载的图像。我在示例中使用的 URL 指向一条小溪的自然照片。

以下示例允许使用由指定的文件夹内baseFolderPath以及任何嵌套文件夹内的所有图像。

谨慎的做法是在imageUrl和imageLocalPath变量之间保持相同的文件扩展名。

import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { WebView } from 'react-native-webview';
import * as RNFS from 'react-native-fs';

const { DocumentDirectoryPath } = RNFS;
const getFolder = filepath => filepath.split('/').slice(0, -1).join('/');
const ensureFolderExists = folderPath => RNFS.mkdir(folderPath + '/', { NSURLIsExcludedFromBackupKey: true });
const writeFile = async (filepath, content, encoding = 'utf8') => {
  await ensureFolderExists(getFolder(filepath));
  await RNFS.writeFile(filepath, content, encoding);
};
const downloadFile = async (fileUrl, destinationPath) => {
  await ensureFolderExists(getFolder(destinationPath));
  await RNFS.downloadFile({
    fromUrl: fileUrl,
    toFile: destinationPath,
    headers: {},
  }).promise;
  return destinationPath;
};

export default () => {
  const baseLocalPath = `${RNFS.DocumentDirectoryPath}/myFolder`;
  const htmlLocalPath = `${baseLocalPath}/webview.html`;

  const imageLocalPath = `${baseLocalPath}/images/myImage.jpg`;
  const imageUrl = `https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2`;

  const html = `<html><body><img src="${imageLocalPath}" style="width: 100%;height:100%;"></body></html>`;

  const [imageDownloaded, setImageDownloaded] = useState(false);
  const [htmlFileWritten, setHtmlFileWritten] = useState(false);
  useEffect(() => {
    writeFile(htmlLocalPath, html).then(() => setHtmlFileWritten(true));
    downloadFile(imageUrl, imageLocalPath).then(() => setImageDownloaded(true));
  }, []);

  return (
    (htmlFileWritten && imageDownloaded) ? (
      <WebView
        originWhitelist={['*']}
        allowFileAccessFromFileURLs={true}
        allowUniversalAccessFromFileURLs={true}
        allowingReadAccessToURL={baseLocalPath}
        source={{ uri: htmlLocalPath }}
      />
    ) : <Text>Loading</Text>
  );
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，9 月前
查看次数：	1528 次
最近记录：	3 年，6 月前