Reactjs 为什么我的形象没有显示在我的项目中

我目前正在学习一个教程，我尝试渲染一些来自数组的图像，如教程中所示，但没有一个图像显示在浏览器中。 这是显示我是如何做到这一点的组件

import React from 'react';

export default function MasonryPost ({post, tagsOnTop}) {
    const style = {backgroundImage: `url("${require(`../../assests/images/${post.image}`)}")`}

    return (
        <a className="masonry-post overlay" style={style} href={post.link}>
           <div className="image-text">
               <div>
    <h2 className="image-title">{post.title}</h2>
               </div>
            </div> 
        </a>
    )
} 

我从webpack.config.js在线上看到了一些关于这个问题的信息，我尝试了他们的大多数解决方案，但问题仍然存在

---

我不知道该怎么办了。非常感谢任何人的帮助。

您需要提供文件的路径。您所做的是提供文件本身的数据。您还可以将它们转换为base64格式。但是我想，只删除require调用就足够了。

您不需要

require

每个图像。您可以简单地使用：

const style={backgroundImage:`url（“/assests/images/${post.image}”）`}

试试这种方法

function MasonryPost({ post }) {
  const style = {
    background: `url("../assets/images/${post.image}") no-repeat`,
    height: "200px",
    width: "230px"
  };

  return (
    <div className="masonry-post overlay" style={style} href={post.link}>
      <div className="image-text">
        <div>
          <h2 className="image-title">{post.title}</h2>
        </div>
      </div>
    </div>
  );
}

函数MasonryPost（{post}）{
常量样式={
背景：`url（“../assets/images/${post.image}”）不重复`，
高度：“200px”，
宽度：“230px”
};
返回(
{post.title}
);
}

---

工作代码：-

您可以使用此代码代替您的代码：

import React from 'react';
    
render(){
  return (
        <div style ={{backgroundImage: url("YourPath")}}>
            <a href={post.link}>
               <div className="image-text">
                   <div>
                       <h2 className="image-title">{post.title}</h2>
                   </div>
                </div> 
            </a>
       </div>
        )
    }

从“React”导入React；
render（）{
返回(
)
}

我这样做了，当我在浏览器中检查文件路径时，它似乎正确地显示了文件路径，但仍然没有图像。请查看浏览器中的开发人员工具，以确保图像是可访问的，而不是404。在Chrome中，它位于“网络”选项卡下。您可以向我们显示您的

webpack.config.js

文件吗？您是否尝试获取

default

属性，例如

require（`.././assests/images/${post.image}`）。default

？

import React from 'react';
    
render(){
  return (
        <div style ={{backgroundImage: url("YourPath")}}>
            <a href={post.link}>
               <div className="image-text">
                   <div>
                       <h2 className="image-title">{post.title}</h2>
                   </div>
                </div> 
            </a>
       </div>
        )
    }