无法找到本地图片

Question

我有一个用React和Django构建的项目。我也使用Webpack加载更改。我想显示本地驱动器中的图像。

我想要显示照片的文件位于：

myProject/brandplug/static/app/photoGrid/SampleDisplay.jsx

照片位于：

myProject/brandplug/static/location_photos/

index.jsx文件位于：

myProject/brandplug/static/app/index.jsx

呈现React的html文件位于：

myProject/accounts/templates/index.html

所以从SampleDisplay.jsx我尝试导入这样的图像：

const itemStyle = {
  backgroundImage: `{require("../location_photos/" + ${photoName})}`
};

然后：

<div style={itemStyle}>
</div>

我还尝试使用"../location_photos/"和"../../location_photos/"而不是"../../brandplug/static/location_photos/"。

但是，图像仍未加载。

我如何加载它们？

Answer 1

您只是将 backgroundImage 设置为字符串，恰好与 require 相同的sytax。

您可以要求图像并使用：

const itemStyle = {
    backgroundImage: {require(`../location_photos/${photoName}`)}
};

但我从未尝试过这个。您可能会发现THIS SO问题很有用。

我建议您不要尝试使用webpack加载图像，而是让Django提供服务。

const itemStyle = {
    backgroundImage: `url("/static/location_photos/${photoName}")}`
};

假设您已将静态文件设置为托管在 / static /

此外，您稍微使用了反引号字符串模板，即您不需要 + ：

`{require("../location_photos/${photoName}")}`