img tag is not supported inside table about plugins HOT 11 CLOSED

img tag is not working inside table tag. Could you please fix this issue

from plugins.

@shalinivathra Please provide a reproduction to help me help you! In my experience, images inside tables do work, provided of course that URLs are not relatives. Best to follow the official templates.

from plugins.

<table
  border="1"
  cellpadding="1"
  cellspacing="0"
  style="border-collapse: collapse; width: 100%"
>
  <tbody>
    <tr>
      <td style="width: 124px">
        <p style="text-align: center">
          <span style="font-family: Arial, Helvetica, sans-serif"
            ><img
              alt=""
              src="file:////data/user/0/com.android.sampleapp/files/TEST/Test.war/Image/logo.png"
          /></span>
        </p>
      </td>
      <td style="text-align: center; vertical-align: middle; width: 1052px">
        <p>
          <span style="font-size: 22px"
            ><span style="font-family: Arial, Helvetica, sans-serif"
              ><span style="color: #000080"
                ><strong>Title&nbsp;/ DocumentId</strong></span
              ></span
            ></span
          >
        </p>
      </td>
      <td style="white-space: nowrap; width: 194px">
        <p>
          <span style="font-family: Arial, Helvetica, sans-serif"
            ><span style="font-size: 14px">Version:&nbsp;</span></span
          >
        </p>
        <p>
          <span style="font-family: Arial, Helvetica, sans-serif"
            ><span style="font-size: 14px"
              >Approved By:&nbsp; Manager
            </span></span
          >
        </p>
      </td>
    </tr>
  </tbody>
</table>

from plugins.

Here first column is logo .. in react-native mobile app img tag inside table is not working. But out of table view img is showing

from plugins.

Could you please help me for this

from plugins.

@shalinivathra To help you, I need a complete reproduction! I suggest you read this to get a hint on what I mean by that: https://github.com/archriss/react-native-render-html/blob/master/CONTRIBUTING.adoc#submitting-a-bug

I should add a contribution guide to this repository though.

from plugins.

@shalinivathra I edited your example to add syntax highlight in markdown... It looks like you are attempting to load a local file.

Local assets are not supported officially by react-native-webview, see for reference react-native-webview/react-native-webview#1413 and https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files.

I suggest you use a base64 data-uri instead. Closing since this is an upstream limitation, but I should add a warning in the readme.

from plugins.

Hi,
But image loading from local path outside table tag. its not loading only inside table tag. If Local assets are not supported officially by react-native-webview, how its loading outside table tag?.. kindly advise

from plugins.

@shalinivathra react-native-webview and react-native-render-html are two distinct packages!

from plugins.

ok, so its not possible load local image inside table right?..

from plugins.

@shalinivathra Yes ... react-native-render-html purpose is to transform HTML to a tree of native components, while react-native-webview renders a full DOM with a web engine, these are two very different approaches. Because React Native doesn't offer a layout algorithm to display table and / or grid views, the only way to render HTML tables is with WebView, hence the hybrid approach. But this comes with the WebView own limitations ... If you want to dig on your own and see if there is any way to use local assets with react-native-webview, you're welcome to do so and use webViewProps to makeTableRenderer config object.

EDIT: if you find something, it would be very nice to report it here so that I can hint users with your workaround :-)

from plugins.