React中无法按此方式导入图片：标题正常但图片不显示该如何解决？

下面是针对你遇到的问题的具体解决步骤：

• 检查图片路径是否正确
  确认图片的实际存储路径和代码里的相对路径完全匹配，注意文件名的空格、大小写（Linux/macOS环境大小写敏感）。比如要确保从Card组件所在目录向上一级，确实存在image/watchImg/image 2.jpg这个文件。

• 移除.default后缀
  在Create React App这类默认配置的React项目中，用require导入图片时，直接取返回值就是图片的URL，不需要加.default。修改后的代码：

  const IMAGES = {
      logo: require("../image/watchImg/image 2.jpg"),
      title: "murshida",
  }
  

  加.default会导致拿到undefined，这就是图片不显示的直接原因。

• 改用import方式导入（更推荐）
  用ES模块的import语法导入图片，写法更清晰，也避免require的坑：

  import watchLogo from "../image/watchImg/image 2.jpg";
  
  const Card = () => {
      const IMAGES = {
          logo: watchLogo,
          title: "murshida",
      }
      // 其余返回代码不变
  }
  

• 自定义webpack项目需检查图片 loader 配置
  如果是自己配置webpack的项目，要确保已经配置了处理图片的loader（比如file-loader或url-loader），否则webpack无法正确解析图片文件。示例配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: ['file-loader'],
        },
      ],
    },
  };
  

内容的提问来源于stack exchange，提问作者Anannya Onu