[英]react.js rendering dynamic images not working
I want to render an image in my 'card' component, which gets the image url from the props, but the image won't show.我想在我的“卡片”组件中渲染图像,它从道具中获取图像 url,但图像不会显示。 I have created the react app with npx create-react-app, the image is in the src/images and the card component is in src/components.
我用 npx create-react-app 创建了 react 应用程序,图像在 src/images 中,卡片组件在 src/components 中。 the card component:
卡片组件:
import React from 'react'
export default function Card(props) {
return (
<section className='card'>
<img/>
<div className='card--info'>
<img src={props.img}/>
<p className='card--info'>
<span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country}
</p>
<p>{props.title}</p>
<p><span className='bold'>{props.price}</span> / person</p>
</div>
</section>
)
}
the app component:应用组件:
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img = '../images/image12.png'
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
I have also tried the followin methods: <img src={require(props.img)}/>
-> this one will show an error: Uncaught Error: Cannot find module '../images/image12.png' <img src={new URL(props.img, import.meta.url)
我还尝试了以下方法:
<img src={require(props.img)}/>
-> 这个会显示错误: Uncaught Error: Cannot find module '../images/image12.png' <img src={new URL(props.img, import.meta.url)
does anyone else know what should I do?有没有人知道我该怎么办?
Meybe a path is not correct?也许路径不正确? Put image to public folder and then use
/image/name.png
I use it all the time.将图片放到公用文件夹,然后使用
/image/name.png
我一直都在使用它。 I think if I render something for everybody, so it can be on public.我想如果我为每个人渲染一些东西,那么它就可以公开。
You need to import the image to use if you have a static image.如果您有 static 图像,则需要导入图像才能使用。
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
import defImage from '../images/image12.png'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img ={defImage}
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
Also If you have a dynamic image name and you want to use that.此外,如果您有一个动态图像名称并且您想要使用它。 Try using it this way.
尝试以这种方式使用它。
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img ="image12.png"
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
And in card component:在卡片组件中:
import React from 'react'
export default function Card(props) {
return (
<section className='card'>
<img/>
<div className='card--info'>
<img {require(`../images/${props.img}`)}/>
<p className='card--info'>
<span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country}
</p>
<p>{props.title}</p>
<p><span className='bold'>{props.price}</span> / person</p>
</div>
</section>
)
}
Make sure if you are using images with require then those images should be in public folder确保如果您使用的图像需要,那么这些图像应该在公共文件夹中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.