React Native - 如何从 WebView 上的本地路径加载图像

Posted

技术标签:

【中文标题】React Native - 如何从 WebView 上的本地路径加载图像【英文标题】：React Native - How to load image from local path on WebView 【发布时间】：2019-05-01 17:23:59 【问题描述】：

我正在寻找如何从本地路径在 WebView 上加载图像。它用于将其插入 MapView 的标注（android 上的问题）。当我使用一个运行良好但与本地路径无关的 url 时。

<WebView
    originWhitelist=['*']
    source=html: '<Body><img id="logo" src="../../assets/img.jpg" onload="onLoad()" /></Body>'
/>

【问题讨论】：

【参考方案1】：

我尝试了几个选项，唯一有效的是：

1) 创建一个 index.html 文件，您可以在其中使用常规图像路径：

<html>
    <body>
    <img src="./dog.jpg"   />
    </body> 
</html>

2) 在WebView 中加载 index.html 文件

<WebView
originWhitelist=['*']
source=require('./index.html')
/>

顺便说一下，我的项目结构是这样的：

我尝试过的不起作用的方法：

<WebView
    originWhitelist=['*']
    source=html: `<Body><img id="logo" width=200 height=200 src="./dog.jpg" /></Body>`
/>

<WebView
    originWhitelist=['*']
    source=html: `<Body><img id="logo" width=200 height=200 src="require('./dog.jpg')" /></Body>`</Body>`
/>

import dog from './dog.jpg'
<WebView
    originWhitelist=['*']
    source=html: `<Body><img id="logo" width=200 height=200 src="$dog" /></Body>`
/>

【讨论】：

是的，效果很好，谢谢！我想动态设置图像的路径是不可能的（我没有网络开发经验）？我不能在 html 文件上使用 javascript？ 如果图像与 .html 位于同一文件夹中，则可以使用，但如果在其他文件夹中则不起作用。 这个解决方案似乎对我不起作用。我收到“第 XX 行的无效调用：require(this.state.index)” @ekkis 你需要添加代码。因此，我建议提出一个新问题。随意ping我，让我看看。谢谢 @Tim，见：***.com/questions/60371739/…

以上是关于React Native - 如何从 WebView 上的本地路径加载图像的主要内容，如果未能解决你的问题，请参考以下文章

如何将参数从 React-Native 发送到 Native

无法从“App.js”解析“@react-navigation/native”-React Native + 如何解决？

如何从 react native 调用 swift native 函数？

如何从 React ^0.14.8 & React-native ^0.24.1 升级到 React 15.0.2 和 React-native 0.26.3

react-native：ListView，如何从顶部推送新行

如何将 oAuth 会话令牌从 salesforce react native 应用程序传递给 react-native webview？