来自对象的图像要求（url）不在 React 中显示

Question

在 Data.js 我有这个对象，道具很少：

export const DataInfo = {
    image: require('../../assets/internet-marketing.svg'),
    alt: 'internet marketing',
    id: 'e-marketing',
    upperText: 'e-marketing solutions',
    title: 'Professional interactive development',
    description: 'Quisque condimentum, diam ut placerat egestas, lectus est semper quam, nec accumsan magna enim eget dui.',
    primary:true
};

在pages/index.js我导入传播：

import { DataInfo } from '../components/DataInfo/Data';

<DataInfo {...DataInfo} />

在DataInfo/index.js中我解构了道具并用它来显示图像：

const DataInfo = (
     { image, alt, id, upperText, title, description, primary }) => {
    return (
        <>    
                     
             <Image src={image}  alt={alt} />
                                       
        </>
    )
}

但是图片不显示。路径是正确的，正如我测试的那样，我没有错误消息。

欢迎任何帮助，谢谢。

Answer 1

问题

如果您检查 img 标签或 console.log，图像源可能与您尝试应用的不同。发生这种情况是因为在构建项目时，webpack 会正确地将图像移动到构建文件夹中并为我们提供正确的路径。

可能的解决方案

使用 public 图片

public 文件夹
```
require('/images/imagename.png')
```

将图像导入为 React 组件

import { ReactComponent as Image } from '../../assets/imagename.png' 

function Something() {
  return <Image />
}

注意：作为 React 组件导入，您不需要在对象上创建 img 标签甚至 image

注2：使用方案2比较好，因为在转换成React Component的时候，也可以减少你的文件大小

来自对象的图像要求（url）不在 React 中显示

Image require(url) from object doesn't display in React

url

image

object

require

reactjs

问题

可能的解决方案