使用React照片库处理图像文件，而不是来自URL的图像
使用React照片库处理图像文件，而不是来自URL的图像
提问于 2020-05-12 23:52:09
我正在尝试在我的react应用程序中使用以下图片库包：
https://github.com/neptunian/react-photo-gallery
我拥有的图像不是来自某个URL，如下例所示：
https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed=&file=/index.js:204-210
我试图将它们存储在我的react应用程序的文件夹中，并保存它们的列表并将该列表作为参数发送到Gallery，但gallery不显示这些图像，只显示来自URL的图像。
列表的示例，仅显示来自URL的第一个图像：
const photos = [
{
src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
width: 4,
height: 3
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschGBH11de.jpg",
width: 4,
height: 3
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammer11.png",
width: 1,
height: 1
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammerRental.jpg",
width: 3,
height: 4
}
];
export default photos;这是它在我的应用程序中的样子：
在DOM中生成的源URL：
回答 1
Stack Overflow用户
发布于 2020-05-13 01:26:35
我找到了一个解决方案，在阅读了更多之后，我发现当使用create-react-app时，你必须使用导入(或要求)，而不能使用img src="...“直接了当。所以我已经像下面的代码一样编辑了图像列表，现在它可以工作了：
import BoschGBH11de from './BoschGBH11de.jpg';
import BoschHammer11 from './BoschHammer11.png';
import BoschHammerRental from './BoschHammerRental.jpg';
const photos = [
{
src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
width: 4,
height: 3
},
{
src: BoschGBH11de,
width: 4,
height: 3
},
{
src: BoschHammer11,
width: 1,
height: 1
},
{
src: BoschHammerRental,
width: 3,
height: 4
}
];
export default photos;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61756106
复制相关文章
相似问题
腾讯云开发者
