Question

我正在尝试创建一个组件，该组件使用内嵌CSS和ReactJS将图像呈现为“平铺”或“卡片”。但是，我无法弄清楚为什么无法显示图像。我是ReactJS的新手，所以这可能只是我未安装的依赖项包-但请告知！

我从Create-React-App启动了这个项目。

我已经检查了URL配置，内联CSS语法，并检查了本地服务器上的页面，但是我似乎无法弄清楚为什么图像不显示。我尝试在URL周围添加“ require”，但这似乎没有用（除非有一种特定的方法需要设置URL为必需？）。我还尝试使用image标签代替，但是当实际图像加载失败时显示了默认的微小图像图标。

import React from 'react';

function getUrl(name) {
  let string = `./images/${name}.jpg`;
  return string
}

function HorizontalTile(props) {

  let name = props.name;
  let position = props.position;
  let size = props.size;

  let url = getUrl(name);

  const divstyle = {
    height: "50vh",
    width: "100%",
    backgroundImage: `url(${url})`,
    backgroundPosition: `${position}`,
    backgroundSize: `${size}`,
    backgroundRepeat: "no-repeat",
    WebkitTransition: "all",
    msTransition: "all",
  };

  return (
    <div style={divstyle} alt={name}></div>
  )
}


export default HorizontalTile

我在同一目录中的另一个JS文件中这样调用此组件：。。

import HorizontalTile from './HorizontalTile';
.
.
.
<HorizontalTile name="proj-hor-1" position="center" size="cover" />
.
.
.
export default Photos

该间隔加载良好，并且所有CSS元素似乎都已捕获，但未显示图像。知道我可以尝试什么吗？

Answer 1

您需要这样的图像

function getUrl(name) {
  let string = require(`./images/${name}.jpg`);
  return string
}

在此函数中，字符串变量是多余的。这样您就可以直接返回require。

为什么使用require可以解决问题？

如果我们想不需使用（如您的问题），则需要将我们的资产（图像）放置到输出目录（在您的bundler（webpack）配置中定义）。如果将图像移到输出目录，则代码应该可以工作。

但是在大型项目中，通常我们使用文件加载器或url-loder作为资产文件。因此，如果您使用文件加载器或url加载器，则应使用require导入静态图像。

图像（带有require）的解析方式类似于JS模块的解析方式。

Answer 2

您的图片文件夹在哪里？确保您的图片文件夹位于公用文件夹而不是src文件夹中。

root
├── public
│   └── images
└── src
    └── index.js

ReactJS不显示backgroundImage内联CSS

2 个答案: