时间戳

首页 > 解决方案 > 即使代码正确，为什么我的图像没有加载？

css - 即使代码正确，为什么我的图像没有加载？

问题描述

没有编译错误，我的页面加载。但是，我的图像在使用 CSS 调用时不会显示。下面的例子。通过研究，我看到了一些关于 web 包的信息，但我尝试安装文件加载器 NPM，但它没有用。谢谢！

[没有编译错误][1] ,kmkmmk

标签： cssreactjs

解决方案

尝试只导入它？

这是您可以用于内容数组的示例：

https://codesandbox.io/s/compassionate-ellis-qitz4?file=/src/App.js

import img from "./img/img.jpg"
//const img = require("./img/img.jpg")
const App = () => {
  return  (
    <Img src={img} alt={alt} />
  )

}

或者试试这个：

import React from "react";
import "./styles.css";

const content = [
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero hunger owards solving the zero hunger SGGS because, our group ",
    img: require("./img/img1.jpg"),
    alt: "img",
    TextPointDesc: true
  },
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero hunger owards solving the zero hunger SGGS because, our group  ",
    img: require("./img/img2.jpg"),
    alt: "img",
    TextPointDesc: true
  },
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero   ",
    img: require("./img/img3.jpg"),
    alt: "img",
    TextPointDesc: true
  }
];

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      {content.map((c) => {
        const image = c.img;
        return <img style={{ height: "100vh", width: "100vw" }} src={image} />;
      })}
    </div>
  );
}

如果您不知道确切的名称，这将起作用：

import React from "react";
import "./styles.css";

const content = [
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero gry and missing meals.  ",
    alt: "img",
    TextPointDesc: true
  },
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero  tool, homeless people will have an increased chance in not going hungry and missing meals.  ",
    alt: "img",
    TextPointDesc: true
  },
  {
    BGLight: false,
    lightTopLine: true,
    TextPoint: true,
    TitleMain: "SECURE APP",
    description:
      "Group 35’s project works towards solving the zero  have an increased chance in not going hungry and missing meals.  ",
    alt: "img",
    TextPointDesc: true
  }
];

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      {content.map((c, cIndex) => {
        const image = require(`./img/img${cIndex + 1}.jpg`);
        return <img style={{ height: "100vh", width: "100vw" }} src={image} />;
      })}
    </div>
  );
}

推荐阅读