如何在 ReactJS 中做动态图像？

Question

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

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

不幸的是，我试图解决这个问题，但一点进展也没有。我非常感谢 "Explain it to me like I am 5" 对此的回答。

我一直在尝试以两种不同的方式使用图像，但不幸的是，这两种方式 对我来说根本不起作用。不幸的是，我需要两者才能继续:(

1：把它作为div的背景。 [我在这里将其用作带有叠加文本的轮播。]

2: 把它作为一个独立的图像。 [这将弥补 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"          
     }}

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

 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]'

我现在的system/errors:

-我在图像文件夹中的 src 代码中指定了一堆图像，如 article1Image.png、article2Image.png、article3Image.png。

-我想直接将"article1Image.png"传递给对象并生成图像。

-我尝试做这样的事情，但一直失败，不幸的是，当我尝试将它用作 div 上的背景图像时，我什至没有收到错误消息......它实际上是我的屏幕上只有空白 space。没有损坏的图像图标，只是一个空白。

   var Background = `'../../../images/articleImages/${
         this.props.article.image
    }'`;

    <div
    style={{
      backgroundImage: `url(${Background})`,
      height: "576px"
    }}

-尝试使用语义-ui的图像时我也运行陷入了一个严重的错误

      <Image
        src={require(Background)}
      />

错误：

 Error: Cannot find module ''../../../images/articleImages/article2Image.png''

然而，令人震惊的是，当我将它作为静态字符串提供时，它仍然有效。

      <Image
        src={require('../../../images/articleImages/article2Image.png')}
      />

但即使我将字符串路径直接提供给 div 的背景图像，它仍然显示为空...

      <div
           style={{
               backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
               height: "576px"
         }}

非常感谢大家的帮助，非常感谢！

Answer 1

根据您的尝试，有 2 种不同的解决方案。

URL

如果您想通过 style={{ backgroundImage: 'url(...)' }} 访问它们，则需要从前端访问 url。如果您使用了 create-react-app，这意味着将图像放在 public 文件夹而不是 src 文件夹中。

因此，如果您在 public 文件夹中有图像，例如：/public/articleImages/article2Image.png，您可以使用 url 样式属性：

const imageName = 'article2Image.png';
<div style={{ backgroundImage: `url('/articleImages/${imageName}')` }}>
  ...
</div>
<img src={`/articleImages/${imageName}`} />

如果您没有使用 create-react-app 配置，那么您将需要通过您正在为您的应用程序提供服务的方式（即 express）提供图像。

需要

这个有点棘手，我不是 100% 不能开箱即用。

我在测试时必须做的是要求我所有的图像都在文件的顶部，硬编码，然后我就可以很好地使用 require(stringTemplate) 了。但是我得到了一个 Error: fileName hasn't been transpiled yet.，所以我不确定同样的修复是否对你有用。

基本上是这样的：

require('../../../images/articleImages/article1Image.png');
require('../../../images/articleImages/article2Image.png');
... 
// This code would be inside a component
const imageName = 'article2Image.png';
const filePath = '../../../images/articleImages/${imageName}';
const fileUrl = require(filePath);
<div style={{ backgroundImage: `url(${fileUrl})` }}>
  ...
</div>
<img src={fileUrl} />

文件顶部没有要求，转译出现问题。

我的建议是采用静态资产路线，这样您就可以使用上面的 URL 技术。 require 更适合像图标一样不经常变化的静态文件。

如有任何问题，请随时提出，我很乐意澄清并提供更多示例。

如何在 ReactJS 中做动态图像？

How to do Dynamic images in ReactJS?

image

jsx

reactjs

semantic-ui-react

URL

需要