Following Shield.io instructions, We can use the logo param to access a bunch of icons available through Simple Icons index. However I couldn't use them in the badge left side without determine a label too.
The badge is produced as result of the following request:
https://img.shields.io/static/v1?logo=react&message=React&color=Blue
Is possible to get just an icon in the left side?
I personally use '%20' as label, which is the space character encoded using Percent-encoding (see: https://www.w3schools.com/tags/ref_urlencode.ASP)
For your badge the correct url would be :
https://img.shields.io/static/v1?message=React&logo=react&labelColor=5c5c5c&color=1182c3&logoColor=white&label=%20
Related
I am using react.js
I'm trying to build a blog page.
there is a texterea tag to write a blog for the user.
now I want to add the function that allows users to add words that are linked.
so that when i show the text from that input words that are linked are clickable
enter image description here
like the blue words in wiki in the image above.
pardon my mistakes (1st question in StackOverflow)
I know about dangerouslysetinnerhtml. but not sure if it's the right way to do so. because then users can modify the code inside (i think). so what is the safe and right way to do so
Reading your case Markdown seems best option as it also supports links insertion. For rendering user entered markdown you may use library like React Markdown. For writing markdown textarea is fine as long as you write markdown syntax properly but you may want to consider libraries like React textarea markdown editor to make things easier.
I’m trying to access the footer of an embed, to see if it has specific text. I can’t find the name of what the footer is,
The one I mainly find is message.embed[0].footer, which doesn’t work.
For more context, I’m trying to make a multi-paged help embed, with buttons that go to the next page, and the footer says what page you’re on.
I’m using the footer to detect the page you are on, and know which page to go to.
Use Message#embeds which returns an array of MessageEmbeds, get the footer from that and get the text from it.
const currentPage = message.embeds[0].footer.text
I just started trying to use shield.io badges today. I'm a little confused.
When I needed to use the C++ logo in a label I used the following request:
https://img.shields.io/badge/C++-%2300599C.svg?&style=for-the-badge&logo=c%2B%2B&logoColor=white
Which yielded a label with a logo, as intended.
I expected it to be logo=c-plus-plus and through trial and error I eventually found out that I should use the encoding for the + sign, %2B.
Now I can't find the logo for Selenium, although it is clearly on the simple-vector list (https://simpleicons.org/icons/selenium.svg) and there's nothing odd about this name, no spaces or signs, so I don't know how to find it. logo=selenium should work but it doesn't.
This is what I'm trying:
https://img.shields.io/badge/selenium-%2343B02A.svg?&style=for-the-badge&logo=selenium&logoColor=white
And what I get is a label without logo.
Any thoughts?
PS: I don't have enough reputation to post images so I can't include the resulting images in the text but you can copy the link to see what I mean.
You should follow the url structure fully https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>. The color property seems wrong.
For Selenium logo request could be like this (without message)
https://img.shields.io/badge/selenium-43B02A.svg?&style=for-the-badge&logo=selenium&logoColor=white.
The parameter for the C++ logo should be cplusplus and the color should be 00599C like https://img.shields.io/badge/C++-00599C.svg?&style=for-the-badge&logo=cplusplus&logoColor=white
https://shields.io/
https://simpleicons.org/
The link that you pasted gives the link now correctly with image
Github link which has most of the shields that you people would require
I'm trying to create a helper function that will return one of two images-- either a check mark or a red error icon, depending on user input.
My header code looks like this
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
My helper function looks like this:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
I'm positive that I'm importing both correctly-- they're in the same relative file path, and came from the same page source. The weird thing is, only the red x will load. The check mark is showing up as a blank image when I try to follow the path in inspect element. However, when I open the check mark in my assets folder, I get the check mark that I'd expect to see.
For reference, I'm using this image for the check mark and this image for the error icon.
I've tried setting the height and width to arbitrarily large numbers, just to make sure that I'm not creating an image with 0 size, and I've set the opacity to 1, in case it was transparent for some reason. Neither of these made the image appear.
All I can think of is that it must be a property of the image that is causing this issue, but I've tried four or five different check mark images, and none of them have worked. I don't understand what I'm doing incorrectly, and all of the supporting documentation I've found has been for improperly importing the data. So far as I can tell, I'm importing this data correctly.
Edit: One weird element that I've noticed. If I console.log my error icon, I get a long string of text beginning with "data: image/png.base64...." If I console.log my checkmark, I get "static/media/Checkmark.89156a.png" and that's it. I have much, MUCH more data for the error icon than the checkmark.
Edit 2: I still don't know what caused this issue, but I just abandoned trying to import images and swapped over to using Unicode symbols, and that's working for me without issue.
Seems like you have some syntax errors in your code
The header should be:
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
The helper function should be:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
See this StackOverflow post for more details
The issue here was one of permissions, I believe. As I eventually learned, if I said
const checkMark = require('./../Assets/checkMark.png')
I could load the checkMark. It's a function of webPack. This post explains it well enough.
I have a custom list renderer that has a logo for a business in it. It has a label Logo_URLImage that has the placeholder image. In my code I get the data and assign HashMaps to the list model, h.put("Logo_URLImage",imageURL); where imageURL is a string that has the absolute URL to the image.
On Android it seems to always work, but most of the testing has been on iOS devices. What happens is that images are updated as you'd expect the first time or two that you run it. A run later on will show blank images (flash the place holder image and then blank) and once that happens images will never come back.
Any thoughts on what might be causing this?
Check that you defined the LogoName map entry. Check that it is unique per image?
Check that it doesn't include special characters that might cause an issue.