我尝试使用map方法遍历SOURCE
数组,但我一直收到此错误:
Unknown named module: '../images/one.jpeg'
任何人都知道为什么会这样吗? require
中的文件路径绝对正确。
var SECTIONS = [
{
title: 'One',
fileName: 'one.jpeg',
},
{
title: 'Two',
fileName: 'two.jpeg',
},
{
title: 'Three',
fileName: 'three.jpeg',
},
{
title: 'Four',
fileName: 'four.jpeg',
},
];
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={require(`../images/${section.fileName}`)}
title={section.title}
/>
))}
答案 0 :(得分:9)
我不认为这是可能的,因为本机需要提前知道要捆绑什么(AFAIK)。但是,您可以require
数组中的所有文件:
var SECTIONS = [
{
title: 'One',
file: require('../images/one.jpeg'),
},
{
title: 'Two',
file: require('../images/two.jpeg'),
},
{
title: 'Three',
file: require('../images/three.jpeg'),
},
{
title: 'Four',
file: require('../images/four.jpeg'),
},
];
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={section.file}
title={section.title}
/>
))}
答案 1 :(得分:3)
您无法使用动态链接。我发现解决这个问题的最佳方法是:
var SECTIONS = {
One: {
title: 'One',
file: require('../images/one.jpeg'),
},
Two: {
title: 'Two',
file: require('../images/two.jpeg'),
},
Three: {
title: 'Three',
file: require('../images/three.jpeg'),
},
Four: {
title: 'Four',
file: require('../images/four.jpeg'),
},
};
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={section.file}
title={section.title}
/>
))}
这样,你可以只使用这些文件,如果你有某种动态图像选择,你可以使用这样的东西
<Image source={SECTIONS[image.type]} />
答案 2 :(得分:2)
尝试使用类似
的直接网址在单独的浏览器中打开文件的http://&LT;&GT;&LT;&GT; /imgages/one.jpg
您也可以这样做:
使用react显示动态图像的一个工作示例:
答案 3 :(得分:1)
有一个可行的解决方案,虽然不推荐用于大型图像,但对于(很多)小图像效果很好。
步骤:
e.g。 ImageData.json
{
"icon1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==",
"icon2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......=="
}
3.将json文件导入动态需要图像的位置。
e.g。
const imageData = require("./images/ImageData.json")
4:在运行时获取/生成密钥/文件名。并获得图像源。
e.g。
const imageSrc = imageData[keyname]
5:在运行时动态生成图像。
e.g。
<Image style={{ width: 70, height: 70, resizeMode: Image.resizeMode.contain }} source={ uri: imageSrc } />
完成..
附加.. 编写一个帮助程序python脚本来自动创建json文件。
import base64
import os
directory = os.fsencode('.')
with open('ImagesData.json', 'wb') as jsonFile:
jsonFile.write(bytes('{', 'utf-8'))
written = False
for file in os.listdir(directory):
filename = os.fsdecode(file)
if filename.endswith('.png'):
with open(filename, "rb") as image_file:
if written:
jsonFile.write(bytes(',\n','utf-8'))
encoded_string = base64.b64encode(image_file.read())
jsonFile.write(bytes(('"' +filename+ '":'), 'utf-8'))
jsonFile.write(bytes('"data:image/png;base64,', 'utf-8') + encoded_string + bytes('"', 'utf-8'))
written = True
jsonFile.write(bytes('}', 'utf-8'))
答案 4 :(得分:0)
我遇到了同样的问题,但情况略有不同。我有一系列需要动态图像的不同对象。我已经在映射数组,但是我需要根据名称将图像匹配到该数组。这有点骇人听闻,但这就是我要做的。
首先,在父组件中,我创建了一个函数来为对象数组呈现组件。我将对象数据传递到称为“对象”的道具中。
就我而言,我知道我的数据是什么,我需要将相应的图像与从要从中获取数据的外部api提取的对象进行匹配。
renderObjects() {
return this.state.objects.map(object => (
<ObjectListDetail
key={object.id}
next
props={this.props}
object={object}
/>
));
}
在我的ObjectListDetail组件中,我创建了一个称为图标的变量,这是另一个对象数组。这次,我创建了一个name属性,该属性与从父级传递到组件的对象匹配,然后有了第二个名为source的键,在其中提供了图像的路径。像这样。
var icons = [
{ name: "BTC", source: Images.btc },
{ name: "ETH", source: Images.eth },
{ name: "ETC", source: Images.etc },
{ name: "ZRX", source: Images.zrx },
{ name: "USDC", source: Images.usdc },
{ name: "LTC", source: Images.ltc },
{ name: "BCH", source: Images.bch },
{ name: "USD", source: Images.usd }
];
注意***我已经将我的所有图像都保存到整个应用程序的单独文件中,并将其导入到顶部。
然后,我创建了一个名为imgSrc的变量,并对结果进行了过滤,以使其与我传递给子组件的对象的名称相匹配。
var imgSrc = icons.filter(
icon => icon.name === props.wallet.name
)
然后我创建了一个Image组件,并在源需求中调用了过滤器的结果并将其指向源。
<Image source={imgSrc[0].source} />
这就是我在应用程序中实现动态图像渲染的方式。
这可能不是最好的做事方式,对此我还是很陌生的,但是我也很乐意批评