Question

我无法通过react redux定位图像的位置。

我正在创建一个反应电影卡，如下所示：

http://react-movie-cards.drminnaar.me/

我的状态在redux存储中。

我的文件结构是这个。

状态位于MovieList-reducer.js，我将其映射到MovieCard.js文件。

为什么会出现这样的错误：

   ×
←→1 of 6 errors on the page
Error: Cannot find module '../images/Kingsglaive_Final_Fantasy_XV.jpg'
▶ 32 stack frames were collapsed.

并将其放在终端中：

    ./src/Movies/MovieCard.js
Critical dependency: the request of a dependency is an expression

请帮助我找到图像文件。

您可以在https://github.com/bradrar/movie-cards和纱线开始或 npm开始

中找到并克隆我的存储库

我只需要定位图像并像这样映射它：

<img className="card-img-top"  src={require(props.movie.imageUrl)} alt="" />

我知道我很亲密，因为我尝试过

 <img className="card-img-top"  src={require("../images/Ghost_In_The_Shell_2_0.jpg")} alt="" />

它看起来像这样：

Answer 1

请参阅我的拉取请求here。由于webpack在构建时需要了解您的所有依赖关系，因此无法在动态上下文中使用require。使用require.context()构建所有图像的上下文，然后使用该上下文引用它们。

首先，将您的引用更改为使用./（因为由于我们将该文件夹加载到上下文中，因此实际上成为根./）：

{
    "id": 100,
    "title": "Kingsglaive",
    ...
    "imageUrl": "./Kingsglaive_Final_Fantasy_XV.jpg"
},

然后在电影卡中创建上下文。（React将在构建时读取该文件夹，然后使您能够使用创建的上下文访问它们）：

const movieImages = require.context("../images/", true, /\.jpg$/);

const MovieCard = (props) => {
    return (      
        ...
        <img className="card-img-top" src={movieImages(props.movie.imageUrl)} alt="" />
    )
}

找不到模块映像React Redux

1 个答案: