reactjs 图像不存在，即使它们位于文件夹中

yhqotfr8 于 2023-03-08 发布在 React

关注(0)|答案(1)|浏览(120)

我正在用Vite创建一个React应用，我的图片存储在应用的公共文件夹中，可以通过public/image-name或.public/image-name访问。当我在本地运行代码时，所有图片都会显示出来，但当我构建并尝试在GitHub上部署页面或使用npm run preview查看预览时，所有图片都会消失。
这肯定不是路径问题，因为我已经检查了相对和绝对路径的每一个可能的组合。当我导入图像以响应import img1 from 'public/beagle.jpg'时，我得到**无法从“src/modules/CardDiv.jsx”解析导入“public/beagle.jpg”。文件存在吗？**它显然存在，因为我在本地使用它。当在VSCode GUI中单击文件时，没有任何显示，一个空白页。

reactjs

来源：https://stackoverflow.com/questions/75665167/images-do-not-exist-even-though-theyre-in-the-folder

1条答案

按热度按时间

yacmzcpb1#

默认情况下，绝对路径不可用，需要使用编译器（如TypeScript）进行配置。不要从公用文件夹导入资源，这些资源是静态公开的（http://example.com/beagle.jpg）。请将图像放在要从中导入的同一目录中：

modules/
├─ CardDiv.jsx
├─ beagle.jpg

然后在CardDiv.jsx中：

import beagle from "./beagle.jpg";

const Component = () => <img src={beagle} />;

注意：这与React无关。这是由您的构建系统在您的案例Rollup via Vite中处理的。

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs 图像不存在，即使它们位于文件夹中

1条答案

相关问题

热门标签

最新问答