如何在 ReactJS 中做动态图像?

Posted

技术标签:

【中文标题】如何在 ReactJS 中做动态图像?【英文标题】:How to do Dynamic images in ReactJS? 【发布时间】:2019-06-16 02:19:08 【问题描述】:

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

(一个用例:系统中的文章有与之关联的图像,系统中有许多文章,最好只提取图像 ID 并根据该 ID 动态显示图像。没有现实可行的方法可以静态地为每篇文章提供图像路径。)

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

我一直在尝试以两种不同的方式使用图像,但不幸的是,两者都对我不起作用。不幸的是,我需要两者都继续:(

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

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

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

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

我当前的系统/错误:

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

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

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

   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 的 backgroundImage 中,它仍然显示为空...

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

谢谢大家,我真的很感谢你的帮助!

【问题讨论】:

【参考方案1】:

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

网址

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

因此,如果您在公共文件夹中有图像,例如:/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 />

如果没有文件顶部的 require(s),编译就会出错。


我的建议是使用允许您使用上述 URL 技术的静态资产路线。 require 更适合像图标这样不经常变化的静态文件。

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

【讨论】:

非常感谢 :D 到目前为止没有任何问题,一切正常!非常感谢! 终于读到这个答案对我有帮助!谢谢! @马蒂

以上是关于如何在 ReactJS 中做动态图像?的主要内容,如果未能解决你的问题,请参考以下文章

在 ReactJs 中基于动态路径加载图像

如何在 ReactJS 中创建动态表?

如何动态更改 ReactJS 样式?

动态导入图像(React Js)(需要 img 路径找不到模块)

如何在 reactjs 中使用伪元素作为内联样式? [复制]

尝试创建动态 Dundas Stackedarea 图