在我的系统中,有几个图片可以供用户查看,对我来说,只需传入一个id,然后将该图像呈现给用户非常有利。
(用例之一:系统中的文章与图片相关联,有许多文章在系统中,从中提取出仅图像ID,并根据该ID动态显示图像是理想的。我没有可能为每篇文章静态地提供图像路径。)
不幸的是,我尝试了解这个问题,但一直没有进展。如果您能用“像我五岁时一样解释”来回答这个问题,我会非常感激。
我已经尝试以两种不同的方式使用图像,但很遗憾,它们都没有起作用。不幸的是,我需要两者继续使用:(
1:将其放置在div的背景中。[我在此处将其用作带有覆盖文本的轮播图。]
2:将其作为独立的图像放置。[这将占Web应用程序中95%以上的图像使用情况。]
在完美的世界中,我希望只需将此对象传递给props即可。
然后,props需要将其接收并将其转换为本地文件的图像路径。
然后,为了将此模板字符串用作以下用途:
1:div的背景图像。
但不幸的是,这只给了我这些错误。
当我尝试像这样使用新的背景对象时,我遇到了不同的错误。
错误信息如下:
- 尝试使用semantic-ui的Image时,我遇到一个非常棘手的错误。
然而令人震惊的是,当我像这样将其作为静态字符串给出时,它确实有效。
感谢大家的帮助,我非常感激!
(用例之一:系统中的文章与图片相关联,有许多文章在系统中,从中提取出仅图像ID,并根据该ID动态显示图像是理想的。我没有可能为每篇文章静态地提供图像路径。)
不幸的是,我尝试了解这个问题,但一直没有进展。如果您能用“像我五岁时一样解释”来回答这个问题,我会非常感激。
我已经尝试以两种不同的方式使用图像,但很遗憾,它们都没有起作用。不幸的是,我需要两者继续使用:(
1:将其放置在div的背景中。[我在此处将其用作带有覆盖文本的轮播图。]
2:将其作为独立的图像放置。[这将占Web应用程序中95%以上的图像使用情况。]
在完美的世界中,我希望只需将此对象传递给props即可。
articleDetails = {
articleId: 38387,
articleTitle: "Magical Unicorn Article"
articleContent: "I am not that creative, but here is some content."
}
<IndividualArticle article={articleDetails}/>
然后,props需要将其接收并将其转换为本地文件的图像路径。
templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`
然后,为了将此模板字符串用作以下用途:
1:div的背景图像。
<div
className="container"
style={{
backgroundImage: `url(${templateStringForImage})` ,
height: "576px"
}}
enter code here
</div>
2:独立图片
<Image
src={require({templateStringForImage})}
/>
我尝试过的一些方法:
我尝试了一些更改,例如改变代码结构,使其变成:
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<div style={{
backgroundImage: url('../../../images/articleImages/article3Image.png'),
height: "576px"
}}
但不幸的是,这只给了我这些错误。
Line 32: 'url' is not defined no-undef
当我尝试像这样使用新的背景对象时,我遇到了不同的错误。
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<Image
src={require({Background})}
/>
错误信息如下:
Error: Cannot find module '[object Object]'
我的当前系统/错误:
-我有一堆像article1Image.png,article2Image.png,article3Image.png这样的图片,它们在一个图像文件夹中被指定在SRC代码中。
-我想直接将“article1Image.png”传递到对象中,并生成一个图像。
-我尝试做这样的事情,但一直失败,当我试图将其用作DIV的背景图像时,甚至没有出现错误消息......它只是我的屏幕上的空白空间。没有损坏的图像图标,只是一个空白。
var Background = `'../../../images/articleImages/${
this.props.article.image
}'`;
<div
style={{
backgroundImage: `url(${Background})`,
height: "576px"
}}
- 尝试使用semantic-ui的Image时,我遇到一个非常棘手的错误。
<Image
src={require(Background)}
/>
错误:
Error: Cannot find module ''../../../images/articleImages/article2Image.png''
然而令人震惊的是,当我像这样将其作为静态字符串给出时,它确实有效。
<Image
src={require('../../../images/articleImages/article2Image.png')}
/>
但是,即使我直接将字符串路径输入到div的backgroundImage中,它仍然显示为空...
<div
style={{
backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
height: "576px"
}}
感谢大家的帮助,我非常感激!