时间戳

首页 > 解决方案 > 错误：在 react.js 上找不到模块“./img.jpg”

javascript - 错误：在 react.js 上找不到模块“./img.jpg”

问题描述

在 react 的一个功能组件中，我试图将来自 props 的图像的 URL 与代码一起使用 <img src={require(productUrl).default}/>（这里 productUrl 来自 props）但是出现了一个错误，即找不到模块我也做了一个控制台日志productUrl 它打印了预期值，当我在 require 中硬编码 url 的值时它正在工作，但我不能使用硬编码的值，因为 URL 来自 props

标签： javascriptreactjs

解决方案

你不需要require在 React Component 中使用。尝试直接在img中使用您的道具。像这样的东西： src

<img src={productUrl} alt="my image"/>

考虑productUrl包含图像的正确url来源:)

因为，您没有在问题中添加任何代码。希望这篇文章对BetterProgramming.pub betterprogramming.pub/how-to-display-images-in-react 的要求有用

更新：从评论部分得到想法 后得到代码库后，我已经解决了这个问题。

CodeSandBox 链接： https ://codesandbox.io/s/issuewithimage-qmkpg

一些主要问题是：

  1. products 数组被错误地导出为函数，而我们可以直接导出它们，我们不需要任何函数。
  2. 由于在这种情况下您使用的是本地图像，我们必须确保将它们放在公用文件夹中并且不要使用相对路径（这会导致问题）。因此，像我一样将您希望使用的所有图像放在公用文件夹中并在您的产品数组中使用相同的名称。
  3. 休息一下，您可能会从代码中弄清楚。:D

干杯！

推荐阅读