Question

我在访问json文件中的本地图像URL时遇到问题。以下是我尝试过的所有方法，但没有一个起作用。

// json
{
    "image": "./images/example.jpg",
}

// React Native
import data from './data.json';

const URL =  JSON.stringify(data.image)   
<Image source = {{uri: URL } style = {{ width: 98, height: 22 }} />    // Image not showing

const URL = data.image
<Image source = {{uri: URL } style = {{ width: 98, height: 22 }} />    // Image not showing

以上方法均未显示图片。

我也尝试了require：

// json
{
    "image": "example.jpg",
}

const item =  data.image   
<Image source = {require( './images/' +  item)} style = {{ width: 98, height: 22 }} />

const item =  JSON.stringify(data.image) 
<Image source = {require( './images/' +  item)} style = {{ width: 98, height: 22 }} />

上面显示了一个错误，仅要求使用字符串文字参数，这对我来说很奇怪，因为以下代码实际上可以正常工作。

const item = 'example.jpg'
<Image source = {require( './images/' +  item)} style = {{ width: 98, height: 22 }} />

我已经在互联网上搜索了好几个小时，却找不到解决方案。有人可以给我展示访问本地json数据的正确示例吗？非常感谢。

Answer 1

您不能在require中使用变量。所有要求都必须是静态可分析的。这意味着您总是必须编写require（'/ path / to / file'）。您可以尝试

const images = {
    profile: {
        profile: require('./profile/profile.png'),
        comments: require('./profile/comments.png'),
    },
    image1: require('./image1.jpg'),
    image2: require('./image2.jpg'),
};

export default images;
import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

您可以详细了解here

我们故意不支持动态生成的图像名称   因为这使得随着时间的推移很难管理资产，就像   你不想怎么做

var MyComponent = require（'./'+ libName + typeOfComponent）;

或类似的东西。像这样的动态图像名称生成   不适用于我们正在推出的新动态资产管理系统   通过它，您可以仅使用cmd + R即时添加和更新资产   （无需再添加到Xcode并重新编译）。

Answer 2

JSON文件：

{
"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",
"car_type": "SUV"

}，

然后添加您的.js文件，如下所示：

{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"
                            />

Answer 3

将您的 json 保存在 .js 文件中，然后执行以下操作...

import avg from "./Components/Avenger-bg1.jpg";
import bts from "./Components/BTS-bg1.jpg";
import dis from "./Components/Disney-bg1.jpg";
import hp from "./Components/HP-bg1.jpg";
import crn from "./Components/BTS-bg1.jpg";
export const theme=[
  {
    "theme_name": "AVENGERS",
    "path": avg
  },
  {
    "theme_name": "BTS",
    "path": bts
  },
  {
    "theme_name": "DISNEY",
    "path": dis
  },
  {
    "theme_name": "HP",
    "path": hp
  },
  {
    "theme_name": "CROWN",
    "path": crn
  }
]

导入所需的所有图像路径并在 json 中分配这些变量不是直接路径。

如何访问json文件中的本地图像URL

3 个答案: