Question

我在访问json文件中的本地图像URL时遇到问题。图像存储在图像目录中。我已经将一些图像地址存储在这样的JSON数组中：

jsonResponse=
[ {"id": "1", "myImage": "./image/img1.png", "myText": "Anytext"},

…
]

const first = jsonResponse[0]

但是当我尝试使用Image中的first.myImage调用它时，它不起作用；我能够得到所有其他东西。因此，我尝试这样称呼它：

source={require('{first.myImage}')} as well as source={require({first.myImage})}

但是它说，道具类型无效。我能够访问所有其他元素。我也将JSON更新为：

[ {"id": "1", "myImage": "require('./image/img1.png')", "myText": "Anytext"},

…
]

source={first.myImage}或source={{first.myImage}}

但是也会给出相同的错误。请帮助我。

Answer 1

确保您正在访问图像所在的目录中的图像，或者导航到具有正确路径的图像

Answer 2

我假设您能够从json文件中检索文件路径，并且该路径是正确的。基于此，尝试使用：

jsonResponse = [{"id": "1", "myImage": "./image/img1.png", "myText": "Anytext"}, ...]

然后在您的应用程序上创建两个const来保存您的变量。您将使用第一个保存从json检索的路径。第二个将用作您的Image组件的来源。

constructor() {
  const imagePath = first.myImage;
  const image = require(imagePath);
}

...

<Image 
   source={image}
   style={{ height: 30, width: 30, resizeMode: 'contain' }}
/>

...

或者，您也可以尝试通过以下方式导入图像：

import image from first.myImage;

Answer 3

JSON File:

{
    "id": 2,
    "name": "Toyota Corolla XLI\\Hatchback Automatic",
    "details": "4 seater, diesel",
    "picture": "./static/images/XLI.jpg",
    "overcharge": "PKR 179 per excess km",
    "weekday": "PKR 190/hr",
    "weekend": "PKR 287/hr"
  },
  
  And then add inyour .js file like this:
  
{PostData.map((postDetail, index) => {
                return (
                  <Link href="details">
                    <Card className="carditem">
                      <Card.Body style={{ cursor: "pointer" }}>
                        <Row>
                          <Col xs="12" sm="4">
                            <img
                              src={postDetail.picture}
                              class="d-block"
                              height="170"
                            />

如何在React Native中使用json文件中的本地图片网址访问本地图片？

3 个答案: