コードが正しいのに画像が読み込まれないのはなぜですか？

debugcn 投稿 Dev

TAKINGXP TAKINGXP

コンパイルエラーはなく、ページが読み込まれます。ただし、CSSを使用して呼び出された場合、画像が表示されません。以下の例。調査を行ったところ、Webパックについて何かがわかりましたが、ファイルローダーNPMをインストールしようとしましたが、機能しませんでした。ありがとうございました！

コンパイルエラーなし

<Img src={img} alt={alt} />

img: require("../../imgs/platform.jpg").default

それが機能しない別の例。

export const ContentOne = {
  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 will design and develop a full stack web-based application that enables kdkdd djkjdkdjf ekjejkkj skfjjskf SGGS because, our group will design and develop a full stack web-based application that enables owards solving the zero hunger SGGS because, our group will design and owards solving the zero hunger SGGS because, our group will design and develop a full stack web-based application that enables  develop a full stack web-based application that enables restaurants, supermarkets and food banks to effectively communicate to not waste food. Therefore, with this effective communication tool, homeless people will have an increased chance in not going hungry and missing meals.  ",
  img: require("../../imgs/genericbackground.jpg").default,
  alt: "img",
  TextPointDesc: true,
};

user67

代わりにインポートしてみてください。

コンテンツ配列に使用できる可能性のある例を次に示します。

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>
  );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]