时间戳

首页 > 解决方案 > 为什么本地图像没有显示在浏览器上同时路径在 React 中是正确的

javascript - 为什么本地图像没有显示在浏览器上同时路径在 React 中是正确的

问题描述

从我的本地 Json 数据中导入的包含图像路径名的图像没有显示在浏览器上，并且我很困惑为什么它没有显示。在 img src 和它自己的 Json 数据上都使用了所需的标签

images: {
      mobil: "./images/portfolio/desktop/finshed-next.png",
      tablet: "./images/portfolio/tablet/finshed-next.png",
      desktop: "./images/portfolio/desktop/color.png",
    },

我使用了下面的两个代码，但它们似乎不起作用

 <img src={require(images.desktop)} alt={title} />
 <img src={images.desktop} alt={title} />

但如果我使用相同的路径进行导入，它的工作原理。我是说

import img1 from "./images/portfolio/desktop/color.png",

它肯定会显示在浏览器上。

标签： javascriptreactjs

解决方案

对不起，如果我错了，我提前道歉。

您可能试图避免手动将图像路径添加到组件。但我似乎无法理解你为什么要这样做。

如果图像是动态的，那么在现实世界的实现中，它们可能可以通过服务器（静态托管）访问。在这种情况下，您将通过 HTTP 调用或类似的方式接收 src（图像 URL）。所以你不会导入图像。


... // logic to fetch the list of image URLs

... // logic to render an image tag with an src value being an image URL

但是，如果图像没有改变，那么您可能可以直接从@calimenikk 提到的资产文件夹中导入它们。

推荐阅读