且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

反应导入文件夹导航

更新时间:2022-12-08 13:32:34

在您的代码中,您将根据React应用程序的位置提供图像源,该位置与Web应用程序的根目录位置都不相关,也与 media 静态文件位置(要配置),因此浏览器将不知道如何呈现它.根据您使用的服务器( nginx Express ),您必须配置静态和/或 media 文件然后根据您的配置在图像源中指定.

In your code you're providing the image source based on your React app's location, which is neither related to web application's root location, nor media or static files locations (to be configured), so the browser will not know how to render it. Depending on what server you use (nginx, Express) you have to configure your static and/or media files and then specify in your image source based on how you configured.

在当前情况下,您可以执行以下操作:

In your present situation you can do the following:

导入

const reactImage = require("../Assets/myimg.png");

然后使用它:

<img src={reactImage.default} />

如果您已经在服务器上配置了媒体文件并正确解析,则只是

If you had media files already configured on your server and properly resolving, it would be just

<img src="/media/Assets/myimg.png" />

假设媒体位置已配置,并且指向资产的父目录.

Assuming media location is already configured and is pointing to the parent directory of your Assets.

在您的示例中,您假设React导入的相对路径和硬编码到image标签中的图像源是相同的,但实际上却不是.

In your example you were assuming the relative path of your React import and the image source hardcoded into image tag are same, but they are actually not.