[英]How to use an imported image in React?
I have been programming in React for a short time and I have some doubts about how to proceed.我已经在 React 中编程了很短的时间,我对如何进行有一些疑问。 I have a component that is displaying an imported svg as an image.
我有一个组件将导入的 svg 显示为图像。
import Arrow from '../arrow.svg';
if (!isChecked) {
config.email = {
clickable: true,
image: Arrow,
onClick: () =>
inProfile
? dispatch(notification(CHANGE_STATUS))
: browserHistory.push(/checkOut),
};
}
Now I want to replace the image I have in my project with one imported from an external library that is rendered as follows现在我想用从外部库导入的图像替换我在项目中的图像,该图像呈现如下
<Img type="right-arrow" />
Here is an example that is working in my code right now这是一个现在在我的代码中工作的示例
renderImage() {
return <Img type="right-arrow" />;
}
render() {
return(
{this.renderHeader}
{this.renderTitle}
{this.renderBody}
{this.renderImage}
);
}
How can I use this new imported component instead of the previously used image?如何使用这个新导入的组件而不是以前使用的图像?
I have tried several ways but I can't get it to render.我尝试了几种方法,但无法渲染。
the last thing I have tried is the following我尝试过的最后一件事是
import Image from '@market/image-market';
if (!isChecked) {
config.email = {
clickable: true,
image: <Img type="right-arrow" />
onClick: () =>
inProfile
? dispatch(notification(CHANGE_STATUS))
: browserHistory.push(/checkOut),
};
}
I don't see how I can use it within this structure.我看不出如何在这个结构中使用它。 If someone could see my mistake.
如果有人能看到我的错误。 Thank you very much for your time and help in advance
非常感谢您的时间和提前帮助
I think you are just a little confused by what's happening under the hood.我认为您对幕后发生的事情感到有些困惑。
config.emailAddress.image
is used like soconfig.emailAddress.image
<>
{config.emailAddress.image}
</>
You should just pass image: <Img type="right-arrow" />
instead of declaring a function.您应该只传递
image: <Img type="right-arrow" />
而不是声明 function。
image: () => <Img type="right-arrow" />
, you will have to call the function to render the component.image: () => <Img type="right-arrow" />
,您将不得不调用 function 来渲染组件。<>
{config.emailAddress.image()}
</>
I think the first approach is always easier.我认为第一种方法总是更容易。
This should also help you understand why SVGs can be loaded so easily.这也应该可以帮助您理解为什么可以如此轻松地加载 SVG。
SVGs can be imported and used directly as a React component in your React code.
SVG 可以作为 React 代码中的 React 组件直接导入和使用。 The image is not loaded as a separate file, instead, it's rendered along the HTML.
图像不会作为单独的文件加载,而是沿着 HTML 呈现。
See this stackoverflow answer for implementation details.有关实现详细信息,请参阅此 stackoverflow 答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.