Question

我可以在我的Reactjs组件中使用import img from './imagesource'和image src={img}导入图像，它在Internet Explorer中可以正常工作。但是，Firefox和chrome无法显示图像。

我尝试将包含图像的文件移动到公用文件夹和image src={process.env.PUBLIC_URL + 'filename'}中，我尝试在webpack-config中更改url-loader限制。我用开发工具检查了路径，在两个浏览器中它们都是相同的，无论用什么图像替换它的结果都是相同的。

//导入和html

import Image from '../Images/profpic.JPG';

image src={Image} className={classes.picture}

// webpack网址加载器

     {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

// webpack文件加载器

      {
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

不确定发生了什么。最初，我认为这是路径问题，但是所有浏览器上的路径似乎都是相同的。firefox inspect elemtent internet explorer inspect element

Answer 1

尝试将文件的文件扩展名从JPG更改为jpg（确保同时在图像文件本身上进行更改）

Answer 2

尝试从以下日期开始要求图像文件

const image = require("../Images/profpic.JPG");

或

<img src={require("../Images/profpic.JPG")} />

并尝试将扩展名重命名为小写

Answer 3

弄清楚了。显然，chrome和Firefox无法识别<img>，<image />或<image></image>。我使用了<img />，效果很好。

Reactjs网站图片可以在Internet Explorer中运行，但不能在Chrome或Firefox中运行吗？

3 个答案: