let img = require(`../assets/images/index/icon_ku.png`)
let img2 = require(`../assets/images/index/icon_DB2.png`)
console.log(img) // 结果：/img/icon_ku.b259504f.png
console.log(img2) // 结果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7nag2AAAAAXNSR0IArs4c6QAADBFJREFUaN7VmXlUVPcVx6dNNEvTNqlpzVZ7upw0nqRH08TYJGpcqMYtKAi4K25VE7ckrTUxwbiCIAKKsinIsDmKSlTcN1wxKpjgvjAwwLDNW2afgZlv733jYNSYP0ak4XfOPW9+v2F49/Pu9vvdp1LdNSaky+nj1bJ7fLqEV인코딩 과정에서 동일한 참조 방법으로 일부 사진은 정상적으로 표시되는 반면 다른 사진은 표시되지 않는 것으로 나타났습니다.
해당 결과를 인쇄한 후, 두 결과가 서로 다른 것으로 나타났습니다. 일부는 base64로 변환되었고 일부는 변환되지 않았습니다.
base64로 변환하면 정상적으로 표시할 수 없습니다.
정보를 찾아보니 require는 노드 모듈화로 도입된 스펙이라는 것을 알게 되었는데, require를 통해 사진을 import해서 사진을 base64로 컴파일 할 수 있기 때문에 path 문제는 없지만 문제가 온다. webpack Changes to size limits in .base.config.js에서 찾을 수 있는 base64로. 하지만 내 요구 사항은 base64로 변환할 필요가 없기 때문에 그림의 크기를 비교한 후 다음 그림과 같이 'ku'가 'DB2'보다 1kb 더 큰 것을 발견했습니다.
그래서 큰 그림을 다시 자르는 UI를 찾아 'DB2'를 6KB 그림으로 바꾸면 결과가 정상적으로 표시되고 문제가 해결됩니다.