如何在反应中加载src和公共文件夹之外的图像

Question

我想将我的 img 标签 src 引用到应用程序的外部，例如从本地硬盘可以吗？ 另外，在restful API中应该如何引用img src到后端上传图片文件夹。

Answer 1

如果您在应用程序外部引用图像，您将被限制使用完整的 URL 和域（例如： https://google.com/your-path ）。

In the case of an API, you can either use the full URL, or you can pass only the relative path (/your-path) and add the domain ( https://google.com ) as a variable in your frontend file (例如通过从环境变量中获取它）。

Answer 2

在您的硬盘驱动器上，您可以简单地使用类似的东西

<img src={"../path/pictures/image.jpg"} />

使用 API，您需要从存储图像的位置获取数据和 url。 无论是在服务器的本地硬盘驱动器上（这意味着您需要在后端做一些事情来提供图像）或https:// url。

从后端获取数据后，您可以简单地在<img/>应答器中引用它。

<img src={state.url} />

如果你使用 Create-react-app，你可以在这里学习

Answer 3

好吧，我解决问题。 事实上，我将 imag 文件转换为 strng，如下所示：

String filePath = HostingEnvironment.MapPath(@"~/Images/"); //read file from directory

var imageString = System.IO.File.ReadAllBytes(filePath + obj.foodImage); // read file as string

 Transfer.Image  = imageString; // and pass to byte variable