要求功能不适用于图像反应 [英] require function not working with image in react

问题描述

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

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

 < img src =" [对象模块]"style ="width:5rem;" 

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

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

 从'../assets/pictures/calendar.svg'导入calendarPic; 

不幸的是，这不是解决方案，因为我将本地图像保存在json中，并且加载全部50张图像绝对是重复性的且无效的.

使用相同的 npx create-react-app ，我之前进行过一些小型项目，但从未遇到过如此令人困惑，却如此基本的错误.当我在互联网上浏览了所有可能的解决方案时，我将非常感激您的答复.

再次感谢您，度过愉快的一天！

解决方案

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

我建议您尝试将图像移到 public 文件夹中，并尝试使用 src 和相对于 public 文件夹.演示此处

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;">

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.

Importing it with import statement works just fine:

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

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.

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!

解决方案

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.

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

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