Question

我正在寻找如何从本地路径在WebView上加载图像。用于将其插入到MapView的标注中（在Android上发行）。当我使用一个效果很好的网址，但使用本地路径却无济于事。

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

Answer 1

我尝试了几种选择，唯一起作用的是：

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

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

2）将index.html文件加载到您的WebView

<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>`}}
/>

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

1 个答案: