[英]How to render SVG images inside a div
I'm new to react and i hope someone can help me with this.我是新手,希望有人能帮助我。 I've searched everywhere for a solution to my problem with no luck.
我到处寻找解决我的问题的方法,但没有运气。
Basically i want to render an array of SVG images inside a div as a backgroundImage: url().基本上我想在一个 div 中渲染一个包含 SVG 个图像的数组作为背景图像:url()。 I've managed to render my array with math.random but i want the SVG images to render in same order as in the array.
我已经设法用 math.random 渲染我的数组,但我希望 SVG 图像以与数组中相同的顺序渲染。
This is my code so far:到目前为止,这是我的代码:
import './ListView.css';
import Green from '../Assets/ListCard/Green.svg';
import Brown from '../Assets/ListCard/Brown.svg';
import Orange from '../Assets/ListCard/Orange.svg';
import Mail from '../Assets/Icons/Mail.svg'
import Phone from '../Assets/Icons/Phone.svg'
function ListView({ userData}) {
const cardImages = [Green, Brown, Orange]; /// Array
const renderList = cardImages.map(function(image) { /// Tried to map through the array with -
return image; /// no luck
})
/// This Math.radom method works, but not the solution i want
const randomItem = cardImages[Math.floor(Math.random()*cardImages.length)];
return ( /// Below inside the div is where i want to render the images.
<div className="list-card" style={{backgroundImage: `url(${renderList})`}}>
<div className="list-card-wrapper">
<div className="list-user-image"><img src={userData.picture.medium} alt=""/></div>
<div className="list-user-info">
<div className="list-user-name">{userData.name.first} {userData.name.last}</div>
<div className="list-user-location">{userData.location.city}</div>
</div>
<div className="list-user-contact">
<img height={19} src={Mail} alt="svg"/>
<img height={19} src={Phone} alt="svg"/>
</div>
</div>
</div>
)
}
export default ListView```
you will need import image and bind it like below:您将需要导入图像并像下面那样绑定它:
import logo from './logo.svg';
function App() {
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
export default App;
This is what you might be looking for:这就是您可能正在寻找的:
import "./styles.css";
export default function App() {
const items = [
{ name: "first" },
{ name: "second" },
{ name: "third" },
{ name: "fourth" },
{ name: "fifth" },
{ name: "sixth" }
];
const colorArray = ["green", "brown", "orange"];
return (
<div className="App">
{items.map((item, index) => {
const classColorIndex = index % 3;
return (
<div
className={`list-card ${colorArray[classColorIndex]}`}
key={index}
>
<p>{item.name}</p>
</div>
);
})}
</div>
);
}
The main concept behind this is, that you have to focus on the index of the item and check if it the first
, second
, or third
item (I am considering it 3 because you have 3 colors in the array).这背后的主要概念是,您必须关注项目的索引并检查它是
first
、 second
还是third
项目(我认为它是 3,因为数组中有 3 个 colors)。 Now, according to index number, you need to add a class to that div, and using CSS, you could provide background to each div according to that array.现在,根据索引号,您需要向该 div 添加一个 class,并使用 CSS,您可以根据该数组为每个 div 提供背景。
In this sample, I have used plain background color, but I have commented how you could use svg as well.在此示例中,我使用了纯背景色,但我也说明了如何使用 svg。 on APP.css, and here is the css
在 APP.css 上,这里是 css
.App {
font-family: sans-serif;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-card {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
flex-basis: 50%;
}
.list-card.green {
background: green;
/* background:url('../../Green.svg'); */
}
.list-card.brown {
background: brown;
}
.list-card.orange {
background: orange;
}
and here is the sandbox link:这是沙盒链接:
https://codesandbox.io/s/stack-overflos-sample-z0yxyk?file=/src/App.js https://codesandbox.io/s/stack-overflos-sample-z0yxyk?file=/src/App.js
On this example, you can see background is assigned, exactly to the array.在这个例子中,你可以看到背景被分配给了数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.