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

【问题标题】：React Native - How to load image from local path on WebViewReact Native - 如何从 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>'}}
/>

【问题讨论】：

标签： react-native webview

【解决方案1】：

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

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

<html>
    <body>
    <img src="./dog.jpg" width="200" height="200" />
    </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，见：stackoverflow.com/questions/60371739/…