相关疑难解决方法(0)

在我的系统中，我有一些用户可以呈现的图像，能够只传递一个 id 然后将该图像呈现给用户对我来说非常有利。

（一个用例：系统中的文章有与之关联的图片，系统中有很多文章，最好只提取图片id并根据该id动态显示图片。没有现实可行的方式，我可以静态地为每篇文章提供一个图像路径。）

不幸的是，我试图弄清楚这一点，但并没有走多远。我会非常感谢“像我 5 岁一样向我解释”这个答案。

我一直在尝试以两种不同的方式使用图像，但不幸的是，这两种方式都不适合我。不幸的是，我将需要两者才能继续:(

1：把它作为一个div的背景。[我将它用作带有重叠文本的轮播。]

2：把它当作一个独立的图像。[这将弥补通过 web 应用程序使用图像的 95% 以上的情况。]

我很想在一个完美的世界中将这样的对象传递给道具。

  articleDetails = {
        articleId: 38387,
        articleTitle: "Magical Unicorn Article"
        articleContent: "I am not that creative, but here is some content."
    }


       <IndividualArticle article={articleDetails}/>

然后让道具接受它并将其转换为我的本地文件的图像路径。

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

但不幸的是，这只给了我这些错误。 …