英文:
ReactJS - create-react-app try to import images in my project (wihout calling them)
问题
我有一个ReactJS项目，我想要在产品中显示标志。在我的资源文件夹（./src/assets/images/logo/other/）中，我有所有的图片ZZZ.png，例如。
但是现在，我删除了这些png文件，它们在./src/assets/images/logo/other/中不再可用。
我没有直接在项目中导入这些图片，但是我有一个简单的结构，像这样。
export const fetchLogo = (product) => {
var logoPath = require(`../assets/images/logo/noLogo.png`);
try {
logoPath = require(`../assets/images/logo/other/${product}.png`);
return logoPath;
} catch {}
return logoPath;
};
fetchLogo("ZZZ") // 返回noLogo.png
所以基本上，对于产品ZZZ，如果没有图片ZZZ.png，该函数将返回noLogo.png的logoPath（这个工作正常）。
但是当我编译我的项目（使用CRA 5.0.1的npm start）并且我没有调用产品ZZZ时，我得到：
WARNING in ./src/assets/images/logo/other/ sync ^\.\/.*\.png$ ./ZZZ.png
Module not found: Error: Can't resolve './ZZZ.png' in 'C:\Users\ my path here'
这个警告是为我删除的所有以前的.png文件（8398个警告）。
那么，如果我没有请求它，CRA怎么知道ZZZ.png是需要的呢？CRA怎么知道我可能会动态地要求它？是否有一个“缓存”知道图片ZZZ.png之前在这里？
我确信这个“问题”来自Webpack和/或CRA，但是我的ReactJS水平相当低。
谢谢。
英文:
I have a ReactJS project where I want to display logo for products. In my assets file (./src/assets/images/logo/other/) I got all my images ZZZ.png for example.
But now, I delete these png and they are no more available in ./src/assets/images/logo/other/
I don't import the image directly in my project, but I have a simple structure like that.
export const fetchLogo = (product) => {
var logoPath = require(`../assets/images/logo/noLogo.png`);
try {
logoPath = require(`../assets/images/logo/other/${product}.png`);
return logoPath;
} catch {}
return logoPath;
};
fetchLogo("ZZZ") // return noLogo.png
So basically, for the product ZZZ, if there is no image ZZZ.png, the function will return the logoPath for noLogo.png (which work fine).
But when I compiled my project (npm start - with CRA 5.0.1) and I don't call the product ZZZ, I got :
WARNING in ./src/assets/images/logo/other/ sync ^\.\/.*\.png$ ./ZZZ.png
Module not found: Error: Can't resolve './ZZZ.png' in 'C:\Users\ my path here'
The warning is for all previous .png I delete (8398 warnings)
So how CRA now that ZZZ.png is needed if I don't ask for it ? And how CRA knows I may require it dynamically ? Is there a "cache" that knows the picture ZZZ.png was here before ?
I'm sure the "problem" come from Webpack and/or CRA, but my ReactJS level are quite low.
Thanks,
答案1
得分: 2
问题是由于您的缓存引起的。要解决这个问题，请清除 npm 缓存。在终端中运行以下命令：
npm cache clean --force
清除浏览器缓存，请转到 检查 -> 应用程序 -> 存储 -> 本地存储，在其中右键单击您的网址，然后点击 清除。
英文:
The problem is because of your cache causing this issue. To solve it clear npm cache .Run this command in terminal:
npm cache clean --force
Clear cache of your browser go to Inspect-> Application ->Storage -> Local Storage -> inside it right click on your web url and press clear.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论