Question

我正在创建对象数组。我希望每个对象都渲染一些道具，包括图像。

我的问题是使图像进入每个对象状态的最佳方法是什么。我可以使用import语句来做得很好。但是，随着列表越来越长，我最终将为不同的图像导入一千个。

payload = {
      "json1": "blabla",
      "etc": "etc",
    }

    headers = {
        'Host': 'www.host.com',
        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36',
        'Accept': 'application/json, text/javascript, */*; q=0.01',
        'Accept-Language': 'en-US,en;q=0.5',
        'Accept-Encoding': 'gzip, deflate, br',
        'Referer': 'https://www.host.com/bla/bla/', 
        'Content-Type':'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'Connection': 'keep-alive',
        'Origin': 'https://www.host.com',
    }

    s = requests.Session()
    response_raw = s.post(url, json=payload, headers=headers)
    print(response_raw)
    print(response_raw.text)

目前，我正在使用上述import语句，但如果可能的话，我想将所有图片存储在各自的单独文件夹中，并在没有import语句的情况下将它们直接称为状态。是否可以使用require（）方法？

我不会发布所有渲染方法，因为它具有搜索框和过滤器，所有这些都可以正常工作。

谢谢

Answer 1

您可以按照以下步骤操作（我将这些步骤包括在项目中）...

将图像存储在公用文件夹中（假设图像位于public/images文件夹中）
创建一个js文件（假设它位于名称为images的src文件夹中）

在images.js内创建一个对象（我们将其命名为IMAGES），其中该对象包含一个对象列表，每个对象均引用图像

src/images.js

export const IMAGES = {
   rusty: { breed : 'kelpie', url: process.env.PUBLIC_URL + 'images/rusty.jpg'},
   rex: { breed : 'cattle dog', url: process.env.PUBLIC_URL + 'images/rex.jpg'},
   rocksea: { breed : 'collie', url: process.env.PUBLIC_URL + 'images/rocksea.jpg'} 
}

现在import个src/images.js文件中您要使用的文件。就这样

根据您的情况，您可以按照以下步骤重写该组件

import { IMAGES } from 'src/images.js';

class DogsList extends Component{
   constructor(props){
       super(props);
       this.state= {
          dogs:[IMAGES.rusty, IMAGES.rex, IMAGES.rocksea]
       }
    }
 }

我希望此步骤对您有所帮助，谢谢：）

Answer 2

您可以将文件放在公用文件夹内的新文件夹中，例如：/dogimages/rusty.jpg

然后将其直接放入您的状态。

 {name:'rusty', breed:'kelpie',     
   image:'/dogimages/rusty.jpg'}

这达到了消除无休止导入的目标，并使代码看起来更加整洁。

将图像添加到对象数组的最佳方法

2 个答案: