ReactJS – create-react-app尝试在我的项目中导入图像(而不是调用它们)

huangapple go评论62阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年7月27日 16:15:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76777768.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定