从数据库渲染本地图像答案

【问题标题】：Rendering local images from database从数据库渲染本地图像
【发布时间】：2021-03-28 23:32:12
【问题描述】：

我正在制作带有标志的国家/地区选择器。国家名称和国旗图像名称来自数据库，如下所示（示例）：

dataSource: [
{
  id: 1,
  name: "Afghanistan",
  image: '../assets/flags/af.png'
},
{
  id: 2,
  name: "Bahrain",
  image: '../assets/flags/ba.png'
},
{
  id: 3,
  name: "Canada",
  image: '../assets/flags/ca.png'
}]

然后我将该数据源发送到我的组件

                        <CountryPickerFlags
                          dataSource={this.state.dataSource}
                        />

然后在组件 FlatList (renderItem) 我做：

  _renderItemListValues(item, index) {
      var image_uri = {uri: item.image} ;   
      
      console.log(JSON.stringify(image_uri));
        
    return (
    
      <TouchableOpacity
        activeOpacity={1}
        style={styles.listRowClickTouchStyle}
        onPress={() => this._setSelectedIndex(item.id, item.name)}
      >
        <View style={[styles.listRowContainerStyle,{ flexDirection:'row', justifyContent: 'center', alignItems: 'center'}]} >
          <Image source={image_uri} />
          <Text style={styles.listTextViewStyle}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }

但是标志没有被渲染.... 如果我对图像进行硬编码（需要），它正在工作......

  <Image source={require("../assets/flags/af.png")} />

我该怎么做？

【问题讨论】：

标签： react-native react-image

【解决方案1】：

转到assets 文件夹并创建一个文件prepareImages.js 并粘贴到以下内容中：

const fs = require("fs");
const files = fs.readdirSync("./assets/flags").filter(x => x.includes("png"));
const ex = "{\n" +
files.map(x => `"../assets/flags/${x}": require("./${x}"),`).join("\n") + "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/flags/index.js", res);

这将创建一个index.js 文件，其中将是这样的对象：

"../assets/flags/af.png": require("./af.png"),

从渲染Image组件的文件中导入图像。

import images from "../assets/flags/images";

像这样渲染图像源：

<Image source={images[image_uri]} />

【讨论】：

如何“执行”prepareImages.js？
转到 assets 文件夹并运行 node prepareImages.js
谢谢！工作！但是使用您建议我的这个系统，我如何合并数据库中的数据，通过此图像导入将其发送到组件...该组件将被共享，因此我无法将图像导入那里...
我不明白你想做什么
我做到了....dataSource: [ { id: 1, name: "Afghanistan", image: images['../assets/flags/af.png'] },跨度>

【解决方案2】：

将要求添加到您的数据集，例如

dataSource: [ { ..., image: require('../assets/flags/af.png')}]

【讨论】：

是的，但从根本上说数据源来自数据库，我应该在数据库中也放入“require”吗？
是的，如果你把 require 放在前缀中，这将有助于在渲染上显示图像