Question

我已经根据各种答案尝试了很多方法，但我似乎无法让它发挥作用。

我的文件结构如下：

-client
--components
---thecomponent.js //the file
--img
---small.png //the image

在component.js内部

// all these don't work
<button><img src={require("../img/small.png")}/></button>
<button><img src={"../img/small.png"}/></button>
<button><img src="../img/small.png"/></button>

非常感谢任何帮助！

编辑：我已尝试过提供的所有建议。看起来我的方向正确，但在使用require时我仍然遇到同样的错误。它说：

找不到模块＆＃39; /public/img/small.png' at require（modules-runtime.js？hash = 0969a31 ...：133）

有什么想法吗？

EDIT2：我发现了问题。实际上我正在使用流星反应，而不是纯粹的反应，因此我提出了错误的问题。 paqash和Rishabh都是正确的答案，但在流星的公共/＆＃34;在引用时要删除的字，如documentation中所述：

名为public /的顶级目录中的所有文件都按原样提供给客户端。引用这些资产时，请不要在URL中包含public /，将URL写为顶级URL。例如，将public / bg.png引用为。这是favicon.ico，robots.txt和类似文件的最佳位置。

Answer 1

var small = require('../img/small.png')

<img src={small} />

这对我有用

Answer 2

您应该使用绝对路径而不是通过relative从http服务器加载图像。您还可以使用CDN托管图像。

添加公共目录，然后加载public ArrayList<DatabasePayroll> getDbPList() { ArrayList<DatabasePayroll> dbPList = new ArrayList<DatabasePayroll>(); Connection connection = getConnection(); String query = "SELECT * FROM `salary sheet`"; Statement st; ResultSet rs; try { st = connection.createStatement(); rs = st.executeQuery(query); DatabasePayroll databasePayroll; while (rs.next()) { databasePayroll = new DatabasePayroll(rs.getInt("Num"), rs.getString("Name"), rs.getDate("LastPaymentDate"), rs.getString("Site"), rs.getString("Designation"), rs.getFloat("SalaryBalance"), rs.getFloat("PerDay"), rs.getFloat("Days"), rs.getFloat("Salary"), rs.getFloat("OTHours"), rs.getFloat("OTRate"), rs.getDouble("OT"), rs.getFloat("Allowance"), rs.getDouble("GrossSalary"), rs.getFloat("Advance"), rs.getFloat("Loan"), rs.getDouble("NetSalary"), rs.getDouble("RequestedAmount"), rs.getString("Status")); dbPList.add(databasePayroll); } } catch (SQLException e) { e.printStackTrace(); } return dbPList; }

之类的图片

<img src="/public/img/small.png" />

如何在ReactJS中包含“<img/>”？

2 个答案: