英文:
How to pass a img prop to get correct path to photo in react
问题
以下是您要翻译的内容:
"From this code I get a 4 cards however I want to add a different photo to each card but using props I wanted to add in the path from the prop but I am getting no photo to render
I am new to react sorry if this is a silliy question I am having trouble finding a clear answer in docs.
function Case(photo) {
return (
<div className="pr-3">
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src={photo} alt="" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021 so
far, in reverse chronological order.
</p>
<a
href="#"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Read more
<svg
aria-hidden="true"
class="w-4 h-4 ml-2 -mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
);
}
const ShowCase = () => {
return (
<div>
<section className="flex flex row pt-12">
<Case photo={imgs / showcase1.png} />
<Case />
<Case />
<Case />
</section>
</div>
);
};
export default ShowCase;
英文:
From this code I get a 4 cards however I want to add a different photo to each card but using props I wanted to add in the path from the prop but I am getting no photo to render
I am new to react sorry if this is a silliy question I am having trouble finding a clear answer in docs.
function Case(photo) {
return (
<div className="pr-3">
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src={photo} alt="" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021 so
far, in reverse chronological order.
</p>
<a
href="#"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Read more
<svg
aria-hidden="true"
class="w-4 h-4 ml-2 -mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
);
}
const ShowCase = () => {
return (
<div>
<section className="flex flex row pt-12">
<Case photo={imgs / showcase1.png} />
<Case />
<Case />
<Case />
</section>
</div>
);
};
export default ShowCase;
答案1
得分: 1
首先,在父组件中导入图像并将其作为 props 传递给子组件:
import img1 from 'src1.png';
import img2 from 'src2.png';
function Parent(){
return (
<>
<Children image={img1} />
<Children image={img2} />
</>
);
}
然后,在子组件中,你可以使用这些图像:
function Children({image}){
return (<img src={image} />);
}
另一种方式是使用绝对路径,如:https://example.com/img.png
function Parent(){
return (
<>
<Children image={'http://example.com/img1.png'} />
<Children image={'http://example.com/img1.png'} />
</>
);
}
英文:
first, import images in parent component and pass to children as a props :
import img1 from 'src1.png';
import img2 from 'src2.png';
function Parent(){
return (<>
<Children image={img1} />
<Children image={img2} />
<>);
}
then, in children component, you can use images:
function Children({image}){
return (<img src={image} />);
}
other way is using of absolute path like : https://example.com/img.png
function Parent(){
return (<>
<Children image={'http://example.com/img1.png'} />
<Children image={'http://example.com/img1.png'} />
<>);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论