时间戳

首页 > 解决方案 > 图像路径正在转换为数据 URI 而不是 URL

reactjs - 图像路径正在转换为数据 URI 而不是 URL

问题描述

我使用 Create-React-App 工具设置了一个基本的 React 应用程序。

我的图片文件夹中有一张图片：/src/img/logo.png

我将它包含在我的一个组件 JS 文件中（假设它位于 /src/Login.js），如下所示：

import logo from "../img/logo.png";

我将它们嵌入到我的代码中，如下所示：

<img src={logo} />

当我查看呈现的页面时，我看到此图像的“src”属性有一个数据 URI。如何让应用程序为此图像生成 URL 而不是数据 URI？

标签： reactjscreate-react-appbundling-and-minificationdata-uri

解决方案

为什么要使用 import 导入图像，您可以直接使用路径或将该路径放在一个变量中，然后将其传递给 src，如下所示：

 var imgUrl = "../img/logo.png"; 

 <img src={imgUrl} />

推荐阅读