Question

我正在尝试从我的react组件中的assets文件夹动态添加图像。这是我的代码：

import React from 'react';

const card = (props) => {
  const image = require.context(
    `../../assets/imgs`,
    true,
    new RegExp(`(${props.vnum}_${props.snum}.png)$`)
  );
  return (
    <div>
      <img src={image} alt="image" />
      <p>{props.english}</p>
      <p>{props.french}</p>
    </div>
  );
};

执行此操作时，出现以下错误：

TypeError： webpack_require （...）。上下文不是函数

我使用了CRA并查找了过去的帖子，我认为这应该可行。我要去哪里错了？

Answer 1

有必要在那些约定中使用它吗？

没有 require.context（）

的简单解决方案

import React from 'react';
import Image from "../../assets/img/english
import Image from "../../assets/img/french

    const card = (props) => {
      return (
        <div>
          <img src={english} alt="image" />
          <p>{props.english}</p>

          <img src={french} alt="image" />
          <p>{props.french}</p>
        </div>
      );
    };

也：

可以在此处添加一些条件渲染（取决于变量渲染英语还是法语）-我不确定您是否需要它。

require.context 是webpack编译器支持的特殊功能，它使您可以从某个基本目录开始获取所有匹配的模块。目的是告诉webpack在编译时将该表达式转换为它可以解析的所有可能匹配模块请求的动态列表，然后将它们添加为构建依赖项，并允许您在运行时要求它们。

因此，如果正则表达式匹配多个元素-需要映射-但是我认为在此特定问题中导入就足够了。

Answer 2

这应该足够了。

import React from 'react';

const Card = (props) => {
  return (
    <div>
      <img alt="image" src={require(`../../assets/imgs/${props.vnum}_${props.snum}.png`} />
      <p>{props.english}</p>
      <p>{props.french}</p>
    </div>
  );
};

Answer 3

您可以使用只需require（）

import React from "react";
import "./styles.css";
import Card from "./card";

export default function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <h2>check this!</h2>
      <Card vnum={12} snum={13} english={"english"} />
    </div>
  );
}

card.js

import React from "react";

export default function card(props) {
  const image = require(`./img/${props.vnum}_${props.snum}.jpg`);

  return (
    <div>
      <img src={image} alt="image1" width="200px" />
      <p>{props.english}</p>
    </div>
  );
}

您可以在这里https://codesandbox.io/s/elegant-ramanujan-5qwcp

进行检查

Answer 4

这不是您所问问题的确切答案，但可能会在以后的场景中为您提供帮助。如果您具有可以从Internet上获取的图像的URL，则可以将它们保存到数组中。例如：const array = ['url1'，'url2'，.... etc]

然后使用：array.map(url => { <img src={url} /> })

此外，如果您要从API中提取消息，请使用相同的方法。

反应动态添加图像

4 个答案: