如何访问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} />
}

您可以在这里查看更多相关信息

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

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

Answer 4

您不需要使用 require 关键字。假设我们有来自 data.json 文件的以下记录。

{
    "id": 118,
    "channelName": "Nintendo Life",
    "videoName": "The 26 Best Game Boy Advance (GBA) Games of All Time",
    "videoId": "https://www.youtube.com/watch?v=bhK3W_3CW7w ",
    "views": 2232114,
    "channelThumbnail": "/channels/nintendo-life.jpg",
    "videoThumbnail": "./image/26-best-games.jpg"
  },

只需将图像文件夹移动到公共文件夹，然后导入即可

从“./image/data.json”导入数据

然后使用内置的 JavaScript 函数映射此数据

数据 && data.map(item=>

{item.channelName}

)等等

Answer 5

我也遇到过同样的问题。 只需将您的图像放入您的公共文件夹中即可。 更新您的 JSON 以从公共文件夹中获取

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

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