[英]Image Source (src) when passed to Reusable-Component does not show image in UI
I have added an image in the public
folder of React-Project.我在 React-Project 的
public
文件夹中添加了一个图像。 Now, when I want to show an image - it gets showed up in a component, but if I try to pass its url and show the image in some reusable component
- I find that image is not shown in UI.现在,当我想显示图像时 - 它显示在组件中,但如果我尝试传递它的 url 并在某些
reusable component
中显示图像 - 我发现该图像未显示在 UI 中。
Can someone help me out?有人可以帮我吗?
Home.js主页.js
import React, { Component } from 'react';
import Cards from './cards';
class Home1 extends Component {
render(){
return(
<div>
<img src="img/aishwarya.jpg" />
<Cards title="Aishwarya" sourcelink="img/aishwarya.png" details="Miss World 1994" />
</div>
)
}
}
export default Home1;
Cards.js Cards.js
import React from 'react';
import './cards.css';
const Cards = (props) => {
return (
<div className="cardHolder">
<div className="imageHolder">
<img src={props.sourcelink} />
</div>
<div className="contentHolder">
<h3>{props.title}</h3>
<p>{props.details}</p>
</div>
</div>
);
}
export default Cards;
Output: Output:
When using webpack
, for images under src
, a path like img/aishwarya.jpg
is only available during build time .使用
webpack
时,对于src
下的图像,类似img/aishwarya.jpg
的路径仅在构建期间可用。
You need to import it, see Adding Images, Fonts, and Files :您需要导入它,请参阅添加图像、Fonts 和文件:
import image from "./img/aishwarya.jpg";
console.log(image) // /aishwarya.84287d09.jpg
<img src={image} />
<img src={require("img/aishwarya.jpg")} />
See working example:请参阅工作示例:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.