Динамический путь к изображению не функционирует. Electronjs, React, Tailwindcss [Duplicate] ⇐ Javascript

[Anonymous]

Я работаю над проектом Electron/React/Tailwind. У меня есть компонент, itemslot.jsx. Я хочу стилизовать определенные DOV динамически на основе значения свойства Image_path объекта HelmetiTem. Тем не менее, это не работает (я предполагаю, что Tailwindcss не поддерживает это).
Я заметил, что когда я передаю переменную bg- [url ($ {helmetiTem.image_path})] , output.cs не меняется. Я также попытался добавить условное атрибут стиля в линии, который будет обрабатывать только фоновое изображение, когда IshelmetSelected True, это также не работает.// ItemSlot.jsx

import React from 'react';

const SlotsMenu = ({itemObjects, slotTypes, handleSlotClick}) => {

const isHelmetSlotSelected = slotTypes.includes('Helmet');
const isTorsoSlotSelected = slotTypes.includes('Torso');
const isArmsSlotSelected = slotTypes.includes('Arms');
const isShoulderSlotSelected = slotTypes.includes('Shoulders');
const isLegsSlotSelected = slotTypes.includes('Legs');
const isHandsSlotSelected = slotTypes.includes('Hands');
const isWeaponSlotSelected = slotTypes.includes('weapon');
const isFoodSlotSelected = slotTypes.includes('food');
const isBoosterSlotSelected = slotTypes.includes('booster');
const isMedSlotSelected = slotTypes.includes('med');

// Item slot tooltip logic
const helmetItem = itemObjects.find((item) => item.slot === 'Helmet');
const helmetItemName = helmetItem ? helmetItem.armor_name : undefined;

const torsoItem = itemObjects.find((item) => item.slot === 'Torso');
const torsoItemName = torsoItem ? torsoItem.armor_name : undefined;

const armsItem = itemObjects.find((item) => item.slot === 'Arms');
const armsItemName = armsItem ? armsItem.armor_name : undefined;

const legsItem = itemObjects.find((item) => item.slot === 'Legs');
const legsItemName = legsItem ? legsItem.armor_name || legsItem.implant_name : undefined;

const shouldersItem = itemObjects.find((item) => item.slot === 'Shoulders');
const shoulderItemName = shouldersItem ? shouldersItem.armor_name : undefined;

const handsItem = itemObjects.find((item) => item.slot === 'Hands');
const handsItemName = handsItem ? handsItem.armor_name : undefined;

const weaponItem = itemObjects.find((item) => item.slot === 'weapon');
const weaponItemName = weaponItem ? weaponItem.weapon_name : undefined;

const foodItem = itemObjects.find((item) => item.slot === 'food');
const foodItemName = foodItem ? foodItem.food_name : undefined;

const medItem = itemObjects.find((item) => item.slot === 'med');
const medItemName = medItem ? medItem.med_name : undefined;

const boosterItem = itemObjects.find((item) => item.slot === 'booster');
const boosterItemName = boosterItem ? boosterItem.booster_name : undefined;

// Logic for determining leg pads or implant in leg slot
const legsItemKeys = legsItem ? Object.keys(legsItem) : undefined;
const legsItemType = legsItem ? legsItemKeys[1] : undefined

return (

{/* Item Slots */}

Armor
{/* Armor Slots Layout */}


handleSlotClick('Helmet') : undefined}>

? 'text-center bg-[url(assets/torsoSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/torsoSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/torsoSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/torsoSlotLG.png)]'
}
title={torsoItemName}
onClick={isTorsoSlotSelected ? () => handleSlotClick('Torso') : undefined}>

? 'text-center bg-[url(assets/armsSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/armsSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/armSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/armSlotLG.png)]'
}
title={armsItemName}
onClick={isArmsSlotSelected ? () => handleSlotClick('Arms') : undefined}>



handleSlotClick('Legs') : undefined}>

? 'text-center bg-[url(assets/shouldersSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/shouldersSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/shouldersSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/shouldersSlotLG.png)]'
}
title={shoulderItemName}
onClick={isShoulderSlotSelected ? () => handleSlotClick('Shoulders') : undefined}>

? 'text-center bg-[url(assets/handsSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/handsSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/handSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/handSlotLG.png)]'
}
title={handsItemName}
onClick={isHandsSlotSelected ? () => handleSlotClick('Hands') : undefined}>




{/* Weapon Slot */}

isWeaponSlotSelected
? 'weapon-slot w-full h-full mt-30 mb-10 p-2 bg-[#1f2533]/50 rounded-xl lg:h-80 lg:mb-20 cursor-pointer'
: 'weapon-slot w-full h-full mt-30 mb-10 p-2 bg-[#1f2533] opacity-50 rounded-xl lg:h-80 lg:mb-20'
}>
handleSlotClick('weapon') : undefined}>



{/* Food, booster, med slots */}

Misc. Slots

handleSlotClick('food') : undefined}>

? 'text-center bg-[url(assets/XL1.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/XL1LG.png)] cursor-pointer'
: 'text-center bg-[url(assets/miscSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/miscSlotLG.png)]'
}
title={medItemName}
onClick={isMedSlotSelected ? () => handleSlotClick('med') : undefined}>

? 'text-center bg-[url(assets/fakeCoca1.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/fakeCoca1LG.png)] cursor-pointer'
: 'text-center bg-[url(assets/miscSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/miscSlotLG.png)]'
}
title={boosterItemName}
onClick={isBoosterSlotSelected ? () => handleSlotClick('booster') : undefined}>




)

}

export default SlotsMenu;< /code>
< /div>
< /div>
< /p>
Я в течение нескольких дней старался придумать элегантное решение этой проблемы, но пока ничего не сработало. Любой вход ценится.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ailwindcss