[英]Image is not rendering in the DOM while passing as props in the App.js file?
I am passing the image name as props in the instance of the Card component in App.js.我在 App.js 中的 Card 组件实例中将图像名称作为道具传递。 Then I am receiving it from the Card component and render it to the DOM.
然后我从 Card 组件接收它并将其呈现给 DOM。 But my image is not showing in the DOM.
但是我的图像没有显示在 DOM 中。 What could be the reason?
可能是什么原因?
This is my App.js这是我的 App.js
import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
import "./images/image12.png";
import "./images/Star1.png";
function App() {
return (
<div className="App">
<Navbar />
<Hero />
<Card
img="image12.png"
star="Star1.png"
obtainedRating={5.0}
TotalRating="6-USA"
briefText="Life lessons with Katie Zaferes"
price="$136"
person="/person"
/>
</div>
);
}
export default App;
Here is my Card component这是我的卡片组件
import React from "react";
import "../style.css";
import "../images/image12.png";
import "../images/Star1.png";
export default function Card(props) {
console.log(props);
return (
<div className="card--section">
<img src={`../images/${props.img}`} className="card--image" alt="Katie" />
<div className="rating">
<img
src={`../images/${props.star}`}
className="star--image"
alt="star"
/>
<small>
{props.obtainedRating} <span>{props.totalRating}</span>
</small>
</div>
<p className="brief-text">{props.briefText}</p>
<p className="price">
<strong>{props.price}</strong>
{props.person}
</p>
</div>
);
}
This is my Folder structure这是我的文件夹结构
src -components -Card.js -images -image12.png -Star1.png -App.js -index.js src -components -Card.js -images -image12.png -Star1.png -App.js -index.js
This is not working because you need to import an image like this and then put imageName as the value of src attribute .这不起作用,因为您需要导入这样的图像,然后将 imageName 作为 src 属性的值。 You can give any name you like.
你可以给任何你喜欢的名字。
import imageName from "../images/image12.png";
src={imageName}
Import images like:导入图像,例如:
import img12 from '../images/image12.png'
import star1 from './images/Star1.png'
The image path can retrieved by using the import statement可以使用 import 语句检索图像路径
like below像下面
import "./styles.css";
import clouds from "./Images/clouds.jpeg";
import CardImage from "./CardImage";
export default function App() {
console.log("cloud path", clouds);
return (
<div className="App">
<CardImage path={clouds} alt="clouds" />
</div>
);
}
I have found the solution.I simply imported我找到了解决方案。我只是导入了
import cardImage from "./images/image12.png"
import star from "./images/Star1.png"
And used them in App.js并在 App.js 中使用它们
<Card img={cardImage} star={star}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.