React.js не может найти путь к файлу с переменной

Question

я раньше не использовал React, и поэтому мой вопрос может звучать глупо, так вот, у меня есть простой проект с TailwindCSS, я хочу при создании нужной мне "структуры" проверять существует ли картинка по указанному пути и добавить определенный класс моему div'у, но React не разрешает так сделать. App.js:

import './App.css';
import Header from './Header';
import Tools from './Tools';

function App() {
  return (
    <div>
      <header>
        <Header/>
      </header>
      <main className='flex w-[80vw] mx-auto'>
        <div id='tools'>
          <Tools/>
        </div>
      </main>
    </div>
  );
}

export default App;

Tools.js:

const Tools = () => {
    return (
        <main className="my-4">
            <h1 className="text-4xl">Инструменты</h1>
            <div>
                <ul>
                    {Box("Big test", "TESTS ARE COOL", "construction.png", "#!")}
                </ul>
            </div>
        </main>
    )
}

const Box = ({name, desc, img, href}) => {
    let imgExists;
    try{
        require(`./img/tools/${img}`);
        imgExists = true;
    }
    catch(err){
        imgExists = false;
    }
    return (
        <li>
            <a href={href}>
                <div>
                    <h2>{name}</h2>
                    <p>{desc}</p>
                </div>
                <div className={imgExists === true ? `bg-[url('./img/tools/${img}')]` : "not-found"}></div>
            </a>
        </li>
    )
}

export default Tools

(Проблем в Header нету)

Ошибка:

Failed to compile.

Module not found: Error: Can't resolve './img/tools/${img}' in '/home/anime/fullstack/PRACTICE/ddracenet/src'
ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css) 5:36-82
Module not found: Error: Can't resolve './img/tools/${img}' in '/home/anime/fullstack/PRACTICE/ddracenet/src'

webpack compiled with 1 error

Answer 1

Мне дали ответ на английской части сайта. Я использовал проверку изображения из ответа ligntbulb.dev2022 и решил присваивать переменной нужный путь, это все починило!

import Axios from "axios";
import React, {useEffect} from "react";

const Tools = () => {
    return (
        <main className="my-4">
            <h1 className="text-4xl">Инструменты</h1>
            <div>
                <ul>
                    <Box name="Big test" desc="TESTS ARE COOL" img="construction.png" href="#!" />
                </ul>
            </div>
        </main>
    )
}

const Box = ({name, desc, img, href}) => {
    let path = `img/tools/${img}`;
    useEffect(() => {
        Axios.get(path).then(() => {
            //pass
        }).catch(() => {
            // eslint-disable-next-line
            path = "not-found";
        })
    }, []);

    return (
        <li>
            <a href={href}>
                <div>
                    <h2>{name}</h2>
                    <p>{desc}</p>
                </div>
                <div className={path}></div>
            </a>
        </li>
    )
}


export default Tools

БЛОГ НА HUSL

React.js не может найти путь к файлу с переменной

Ответы (1 шт):