logo标签列表

React Native - 如何在 WebView 中加载本地路径的图片

react-nativewebview
3

我正在寻找如何从本地路径加载图像到WebView。这是为了将其插入到MapView的信息窗口中（在Android上出现问题）。当我使用URL时，它可以正常工作，但使用本地路径却不行。

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

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

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')}
/>

顺便说一下，我的项目结构如下：

enter image description here

我尝试过的无法解决问题的方法：

<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>`}}
/>
是的，那个很好用，谢谢！我想动态设置图像路径可能是不可能的（我在Web开发方面没有经验）？我不能在HTML文件中使用JavaScript吗？ - jolearn
如果图像与 .html 文件在同一文件夹中，那么它可以工作，但是如果在其他文件夹中则无法工作。 - jolearn
这个解决方案对我似乎不起作用。我在XX行收到一个“无效调用：require（this.state.index）”的错误提示。 - ekkis
@ekkis你需要添加代码。因此，我建议您提出一个新问题。随时ping我，这样我就可以看看。谢谢。 - Tim
@Tim，请查看：https://dev59.com/y7noa4cB1Zd3GeqPQW5b - ekkis
另一种解决方案是尽可能地以base64加载： url('data:image/png;base64,iVBOR=....') - Roni Castro
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接