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

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

上述方法中未显示图像。

我也尝试过如下要求：

// 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 中分配这些变量 不是直接的路径。