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

Question

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

Answer 1

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

在 API 的情况下，您可以使用完整的 URL，也可以仅传递相对路径 (/your-path) 并添加域 (https://google.com) 作为前端文件中的变量（例如通过从环境变量中获取它）。

Answer 2

在你的硬盘上，你可以简单地使用类似

的东西

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

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

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

<img src={state.url} />

如果您正在使用 Create-react-app，您可以学习 here

Answer 3

嗯，我解决问题了。事实上，我将图像文件转换为这样的字符串：

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

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

how to load image outside src and public folders in react

reactjs

image

src