您好,我正在尝试使用数组加载相对图像,但是它不起作用

时间:2019-05-25 02:09:20

标签: javascript reactjs

图像对象不起作用。

我尝试导入图像,并将其放入JSX并使用相对路径。

const TeacherList = [   {     名称:“ PowerPumpsandMoves”,

img_src: "../PPMfinalmockup.png",
id: "teach-4",
live: "",
used: "JavaScript,Html5,BootStrap-4"

}

我希望此图像显示出来。

1 个答案:

答案 0 :(得分:1)

您好,假设您正在使用Create React App或类似工具,则必须在应用启动时显式导入所有资源。不幸的是,它们不能仅仅作为路径存在于数组中。

解决特定的相对路径问题将取决于您的开发环境以及所使用的任何开发服务器(如webpack-dev-server)的设置。

如果图像数组来自API或其他一些动态数据源,则更好的做法是将图像托管在CDN上,并在数据中使用绝对URL。 AWS桶和Cloudinary是尝试此操作的出色服务。

但是,如果您使用的是webpack,则可以从单个目录快速导入大量照片,您可以查看此答案。

Dynamically import images from a directory using webpack