javascript - ReactJS 不显示 backgroundImage 内联 CSS

Question

我正在尝试使用内联 CSS 和 ReactJS 创建一个将图像呈现为“图 block ”或“卡片”的组件。但是，我无法弄清楚为什么图像没有显示。我是 ReactJS 的新手，所以这可能只是我还没有安装的依赖包 - 但请多多指教!

我从 Create-React-App 启动了这个元素。

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

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解决了？

如果我们想在没有要求的情况下使用(就像你的问题)，我们需要将我们的 Assets (图像)放置到输出目录(这是在你的 bundler (webpack)配置中定义的)。如果您将图像移动到输出目录，您的代码应该可以工作。

但在大型元素中，我们通常使用 file-loader 或 url-loder 作为我们的 Assets 文件。因此，如果您使用 file-loader 或 url-loader，则应该使用 require 来导入静态图像。

图像(需要)像解析 JS 模块一样被解析。