如何将图像属性传递以获取在React中正确的照片路径。

huangapple go评论57阅读模式
英文:

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 &#39;src1.png&#39;;
import img2 from &#39;src2.png&#39;;
function Parent(){
return (&lt;&gt;
&lt;Children image={img1} /&gt;
&lt;Children image={img2} /&gt;
&lt;&gt;);
}

then, in children component, you can use images:

function Children({image}){
return (&lt;img src={image} /&gt;);
}

other way is using of absolute path like : https://example.com/img.png

 function Parent(){
return (&lt;&gt;
&lt;Children image={&#39;http://example.com/img1.png&#39;} /&gt;
&lt;Children image={&#39;http://example.com/img1.png&#39;} /&gt;
&lt;&gt;);
}

huangapple
  • 本文由 发表于 2023年2月10日 03:16:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75403412.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定