img tag is not supported inside table

[shalinivathra]

Hi, I used this library for displaying the table. its working fine in normal text. but its not supported <img> inside <table> . Could you please suggest how can use <img> inside <table>.

Thanks, Shalini

[shalinivathra]

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

[jsamr]

@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.

[shalinivathra]

<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>

[shalinivathra]

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

[shalinivathra]

Could you please help me for this

[jsamr]

@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.

[jsamr]

@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 https://github.com/react-native-community/react-native-webview/issues/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.

[shalinivathra]

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

[jsamr]

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

[shalinivathra]

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

[jsamr]

@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 :-)