从 json 响应中获取真实的图像路径

Question

我有一个提供 json 文件的本地快递服务器。我在本地文件夹中也有许多图像文件。图像路径是我想在我的 DOM 中显示的 json 对象的一部分。但是，我将这些图像路径的字符串表示形式作为我无法使用的响应的一部分。将本地图像从本地服务器发送到前端的最佳方式是什么。

问题图片：

我的服务器端配置：

app.use(express.static(path.join(__dirname, 'public')))
app.use(express.static(path.join(__dirname, 'server/img')))

我的 JSON 文件

{
  "Images": [{
    "title": "First Block",
    "images": ["server/img/bijay.jpg", "server/img/dance.png", "server/img/ocean.jpg"]
  }, {obj2}, {obj3}, {obj4}]
}

我的打印图像的客户端代码

<ul>
  <li ng-repeat="obj in objArray"><img ng-src="{{obj.images[0]}}"></li>
</ul>
// just testing first image

我的文件夹结构：

图像位于 img 文件夹中。为了节省空间，这里没有显示

Answer 1

经过反复思考，终于找到了解决办法。

我已将服务器中的“静态”文件夹定义为“server/img”。但是，在 json 对象中，我再次为图像文件分配了绝对路径。我需要做的就是 'server/image/imgFileName.jpg' 来解决冲突 :))

Answer 2

基于@Tolsee 的cmets：

将图像放在“公共”文件夹中。 (/public/img/dance.png) 然后在您的快速应用程序中添加以下行：

let app = express();
app.use(express.static(path.join(__dirname, 'public')));

图片将通过以下网址提供：

localhost:port/img/dance.png

您可以只提供 /server/img ，然后使用以下内容：

let app = express();
app.use(express.static('/server/img'));

localhost:port/dance.png

根据您的项目结构，可能需要一些配置。