@fs in image path: why?

Programming
, , ,
1

Issue

I am getting an @fs error when importing images in my script FileUtil.jsx and using them in OrderPage.jsx. I have identified a workaround of removing the @fs from the path after importing, but I would like to know why this error occurs.

FileUtil.jsx 

import Oolong from '../assests/img/Oolong.png'
import ChaiTea from '../assests/img/ChaiTea.png'
import CharcoalRoastedOolong from '../assests/img/CharcoalRoastedOolong.png'
import HighMountainOolong from '../assests/img/HighMountainOolong.png'
import RubyBlackTea from '../assests/img/RubyBlackTea.png'

export const images={
    "Oolong":Oolong,
    "Chai Tea":ChaiTea,
    "Charcoal Roasted Oolong":CharcoalRoastedOolong,
    "High Mountain Oolong":HighMountainOolong,
    "Ruby Black Tea":RubyBlackTea,
};

OrderPage.jsx 

import {images} from './FileUtil';
console.log(images['Oolong']);
console.log(images['Chai Tea']);
console.log(images['Charcoal Roasted Oolong']);
console.log(images['High Mountain Oolong']);
console.log(images['Ruby Black Tea']);

images['Oolong']=images['Oolong'].replace("/@fs","");

Error:
Oolong @fs error

2

The @fs error occurs because the file paths in the FileUtil.jsx file are using the @fs alias. This alias is not recognized by the JavaScript runtime, causing the error.

To fix this issue, you can remove the @fs from the file paths in FileUtil.jsx and use the relative paths instead.

Here’s the updated FileUtil.jsx code:

import Oolong from '../assests/img/Oolong.png'
import ChaiTea from '../assests/img/ChaiTea.png'
import CharcoalRoastedOolong from '../assests/img/CharcoalRoastedOolong.png'
import HighMountainOolong from '../assests/img/HighMountainOolong.png'
import RubyBlackTea from '../assests/img/RubyBlackTea.png'

export const images={
    "Oolong": Oolong,
    "Chai Tea": ChaiTea,
    "Charcoal Roasted Oolong": CharcoalRoastedOolong,
    "High Mountain Oolong": HighMountainOolong,
    "Ruby Black Tea": RubyBlackTea,
};

With this change, the @fs error should no longer occur.