要求功能不适用于反应中的图像

问题描述

我在 React 中多次使用 <img src={require('./somRelativePath/image.jpg)}.但是，这一次它似乎不起作用.没有任何错误(例如找不到图像等)，但网站上的图像损坏.

I've used <img src={require('./somRelativePath/image.jpg)} in React many times. However, this time it seems not to be working. There are no errors whatsoever (such as that the image was not found etc.) but the broken image on website.

在检查了元素后，我对浏览器中的转译结果感到有些困惑:

After inspecting the element I was somewhat confused by the transpiled result in browser:

<img src="[object Module]" style="width: 5rem;">

看起来好像它将图像作为组件而不是实际文件加载.我已经使用 npx create-react-app 创建了该应用程序，但到目前为止还没有弹出它.因此，babel 或 webpack 配置中没有错误，因为它目前由后台的 react 处理.

It appears as if it loads the image as a component not the acutual file. I've created the app with npx create-react-app and haven't ejected it so far. So there is no error in babel or webpack configuration as it is currently handled by react under the hood.

使用 import 语句导入它就可以了:

Importing it with import statement works just fine:

import calendarPic from '../assets/pictures/calendar.svg';

不幸的是，这不是解决方案，因为我将本地图像保存在 json 中，加载所有 50 张图像肯定会非常重复且无效.

Unfortunately that's not the solution because I have the local images saved in json and it would be definitely quite repetitive and ineffective as well to load all 50 images.

使用相同的 npx create-react-app 我以前做过一些小项目，但从未遇到过如此令人困惑但如此基本的错误.我已经浏览了整个互联网上所有可能的解决方案，因此我将非常感谢您的任何回复.

With the same npx create-react-app I've made a handful of mini-projects before but have never come across such a perplexing, yet so basic error. I'd be so thankful for any response as I've skimmed every possible solution throughout the internet.

再次感谢您，祝您有愉快的一天！

Thank you again and have a lovely day!

推荐答案

我猜是图片的位置问题.当您使用 create-react-app 时，应用程序将被捆绑到 public 文件夹中.然后 require 语句将开始获取图像 - 在这种情况下，相对于 public 文件夹而不是 src 文件夹.

I guess the problem is the location of the image. When you use create-react-app the app will be bundle into the public folder. Then the require statement would start to fetch the image - in this case in relative to the public folder and not to the src folder.

我建议你做的是尝试将图像移动到 public 文件夹并尝试使用 src 与相对于 public 文件夹.演示在这里

What I suggest you to do is try to move the image into the public folder and try using the src with URL relative to the public folder. Demo here

这篇关于要求功能不适用于反应中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！