Fatal编程技术网
  • html/
  • 如何在react native for ANDROID中以HTML代码显示来自图像URI的图像？

如何在react native for ANDROID中以HTML代码显示来自图像URI的图像？

html react-native

如何在react native for ANDROID中以HTML代码显示来自图像URI的图像？,html,react-native,Html,React Native,我正在使用“react native image picker”从画廊/相机中选择图像。它给出了响应，我使用响应的URI在HTML中显示图像，并从HTML生成PDF。现在，我可以从iOS中存储的URI中以PDF格式显示图像，但无法在Android中显示。请告诉我我做错了什么？。我的代码如下： getDataForHtmlAndGeneratePDF = async () => { let CandidatePhotoUrl = await AsyncStorage.

我正在使用“react native image picker”从画廊/相机中选择图像。它给出了响应，我使用响应的URI在HTML中显示图像，并从HTML生成PDF。现在，我可以从iOS中存储的URI中以PDF格式显示图像，但无法在Android中显示。请告诉我我做错了什么？。我的代码如下：

getDataForHtmlAndGeneratePDF = async () => {
    let CandidatePhotoUrl = await
        AsyncStorage.getItem('CandidatePhotoUrl'); // getting image uri from async storage which i stored in another class. 

    const htmlString = `
           <!DOCTYPE html>
           <html>
           <head>
           <style>
           table.Rating, table.Rating th, table.Rating td {
             border: 1px solid black;
             border-collapse: collapse;
           }

           table.Rating th {
           border-Top: 2px solid black;
           border-Left: 2px solid black;
           border-Right: 2px solid black;
           background-color: LightGray;
           padding: 15px;
           }
           table.Rating td {
           border-Left: 2px solid black;
           border-Right: 2px solid black;
           padding: 10px;
           }

           </style>
           </head>
           <body style="justifyContent: 'center'">
           <div style=" height: 100px;
               width: 100%; display: flex; justify-content: center; align-items: center;">
               <Text align="center" style = "padding-Top: 5px; font-size: 32px; margin-left: 10px;font-weight: bold;"> 
               Technical Interview Assessment Sheet</Text>
           </div>

           <br>
           <table style="width:100%">
             <tr height="50">
               <td style="width:117px">Candidate Name:</td>
               <td style="width:55%">${candidateName}</td>
               <td rowspan="2"><img src= ${this.ShowImageForCandidate(CandidatePhotoUrl)}  align="top" style="width:80px;height:80px;" /></td>
             </tr>
             </table>
           </table>
           </body>
           </html>
           `;

    let options = {
        //Content to print
        html: htmlString,
        //File Name
        fileName: 'feedback',
        //File directory
        directory: 'docs',
    };

    let file = await RNHTMLtoPDF.convert(options);

}

ShowImageForCandidate = (photoUrl) => {
    if (photoUrl != null) {
        return photoUrl
    } else {
        return 'https://image.flaticon.com/icons/svg/17/17004.svg'
    }
}

getDataForHtmlAndGeneratePDF=async（）=>{
等待
AsyncStorage.getItem（'Candidatephotour'）；//从异步存储中获取图像uri，我将其存储在另一个类中。
常量htmlString=`
表.额定值，表.额定值th，表.额定值td{
边框：1px纯黑；
边界塌陷：塌陷；
}
表2.第th级{
边框顶部：2件纯黑；
左边框：2倍纯黑；
右边框：2倍纯黑；
背景颜色：浅灰色；
填充：15px；
}
表.差饷物业估价署{
左边框：2倍纯黑；
右边框：2倍纯黑；
填充：10px；
}
技术面试评估表


候选人姓名：
${candidateName}
`;
让选项={
//要打印的内容
html:htmlString，
//文件名
文件名：“反馈”，
//文件目录
目录：'docs'，
};
让file=wait RNHTMLtoPDF.convert（选项）；
}
ShowImageForCandidate=（照片URL）=>{
if（photoUrl！=null）{
返回照片URL
}否则{
返回'https://image.flaticon.com/icons/svg/17/17004.svg'
}
}
响应结构如下所示：
提前谢谢

React-Native不支持HTML标记，您可以使用React-Native本身

<View>
    <Image
      style={{width: 50, height: 50}}
      source={{uri: this.ShowImageForCandidate(CandidatePhotoUrl)}}
    />
</View>
如果您试图使用web view，请告诉我我可以更正我的答案。

React-Native不支持HTML标记，您可以使用React-Native本身

<View>
    <Image
      style={{width: 50, height: 50}}
      source={{uri: this.ShowImageForCandidate(CandidatePhotoUrl)}}
    />
</View>
如果您试图使用web view，请告诉我我可以更正我的答案。

是的，我知道，但我正在使用第三部分，即“将本机HTML转换为PDF”，从HTML本身生成PDF。所以我刚刚更新了我的问题，请看一下。好的，你能告诉我在html中传递给src的是什么吗？对于Android，URI是一个字符串，即content://com.reactnativepoc.provider/root/storage/emulated/0/Pictures/images/image-name.jpg“.@GulshanKumar在AsyncStorage中您正在保存
response.uri
对吗？是的，我正在AsyncStorage中存储它。是的，我知道这一点，但我在第三部分的帮助下从HTML本身生成PDF，即“将本机HTML转换为PDF”。所以我刚刚更新了我的问题，请看一下。好的，你能告诉我在html中传递给src的是什么吗？对于Android，URI是一个字符串，即content://com.reactnativepoc.provider/root/storage/emulated/0/Pictures/images/image-name.jpg“.@GulshanKumar在AsyncStorage中您正在保存
response.uri
对吗？是的，我正在AsyncStorage中存储它。