我在React中创建了一个迷你项目,我在下面的代码中遇到了一个问题;
function Medwiki(props) {
const medicines = [
{ name: 'Medicine A ', details: 'Details of Medicine A', image: '../assets/pngegg.png' },
{ name: 'Medicine B ', details: 'Details of Medicine B', image: 'https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' },
{ name: 'Medicine C ', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
];
return (
<div>
<div className="top-container">
MedWiki
<img src='https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' alt="Logo" style={{ width: '10px', height: '10px' }}/>
</div>
<div className="medicine-container">
{medicines.map((medicine, index) => (
<div className="medicine-box" key={index}>
<img src={medicine.image} alt={medicine.name} />
<div className="medicine-name">{medicine.name}</div>
<div className="medicine-details">{medicine.details}</div>
</div>
))}
</div>
</div>
);
}
对于Medicine A,图像不显示,但对于Web链接,图像与Medicine B中的图像相同
我的.js文件的路径是src/files,图像的路径是/src/pngegg. png
可能是什么问题?
4条答案
按热度按时间c3frrgcw1#
它可能无法解析图像的路径。我想你可以用
require('path/to/image/')
试试eaf3rand2#
我认为你应该使用相对于根目录的相对路径,例如“/src/assets/pngegg.png”
在此检查此问题Correct path for img on React.js
可能会给予你更明确的答案
91zkwejq3#
我认为这就是问题所在**'../assets/pngegg.png'**
尝试相对路径
brccelvz4#
在React中使用图像有一些区别。请关注此帖子。https://levelup.gitconnected.com/display-images-in-react-8ff1f5b1cf9a?gi=6a512c107c6a希望这对你有帮助。