I've been trying to view the imgur format gifv for a while but i just cant seem to get it working.
Been testing with img tags, video tags, iframes. So far only the iframe seems to work - but i cant resize the iframe due to browser limitations.
<img src="http://i.imgur.com/rCkPdZm.gifv" /> - nope
<video src="http://i.imgur.com/rCkPdZm.gifv"/> - nope
Any tips on how to display for example http://i.imgur.com/rCkPdZm.gifv
Thanks!
A gifv is not an image format, it's a made-up "extension" to make the landing page look like you have opened an image link directly, while being able to stream video instead of a much larger gif file. Use the "view source" option and go find out! :)
You can right-click on the gifv "image" and the browser should give you an option to "copy video url", which you can then use in a <video> element:
<video src="http://i.imgur.com/rCkPdZm.mp4" />
https://jsfiddle.net/xc4cqoh5/
In this context it doesn't matter if it's React or just plain HTML website, the solution is the same: you need to grab the URL of the actual video being played, not the gifv page that embeds it. It seems you can just replace the .gifv extension with .mp4. To make this answer relevant to the reactjs tag here's an example:
const Player = props => {
let videourl = props.videourl.replace('.gifv', '.mp4');
return <video src={ videourl } />;
};
ReactDOM.render( <Player videourl="http://i.imgur.com/rCkPdZm.gifv" />,
document.getElementById('container'));
http://jsfiddle.net/69z2wepo/47077/
Related
I am creating a gatsby website that uses the flickity-react-component to display a slider with product images. I believe that I should use the gatsby image to make it load faster, but when I try it, the Image does not display (it is 0x0 pixels).
This is the code I am trying to run:
const ThirdPage = ({ data }) => {
...
function Carousel() {
return (
<Flickity
className={'carousel'} // default ''
elementType={'div'} // default 'div'
options={flickityOptions} // takes flickity options {}
disableImagesLoaded={false} // default false
reloadOnUpdate // default false
static // default false
>
<Img fluid={data.imgPrincipal.childImageSharp.fluid} alt="Mulher a lavar o cabelo com o chuveiro ecológico" />
<img src="https://placeimg.com/640/480/nature" />
<img src="https://placeimg.com/640/480/nature" />
<img src="https://placeimg.com/640/480/architecture" />
</Flickity>
);
}
The "Img" is the one using the gatsby image, the others are what I had before.
This is the result
I don't get an error when running this, I believe this might be because gatsby-image creates a div.
Can someone help me make this work? I am a beginner, so if it's something very advanced, I would appreciate an alternative ... Thank you.
Indeed, gatsby-image is not only a simple image. It creates a wrapper with a few nested div HTML structure inside to make the blur effect and the rest of the improvements.
Take a look at gatsby-image docs:
Note: gatsby-image is not a drop-in replacement for <img />. It’s
optimized for fixed width/height images and images that stretch the
full-width of a container. Some ways you can use <img /> won’t work
with gatsby-image.
It may not work with all sliders.
I've used it with other sliders that accept a nested structure inside, not only a single <img> tag such as Swiper or Slick.
I'm building a website where I get a blog post from an API call. The body of the post is just html code mixed with text, images and even objects like youtube videos (it is build with ckeditor in the back). Everything is working as expected but I would like to make images clickable. Clicking the image, would open a modal in lightbox style.
I was considering extracting all the images (if any) from the body and making a gallery at the bottom of the post. But I think that would be more elegant just making images clickable and opening the dialag without showing them twice along the post.
An example of the response:
body: "<p>this is a text with some images: <img src='path/to/image1' /> and <img src='path/to/image2' /> how to make them clickable in React?</p>"
That body is rendered this way:
<GridItem xs={12} sm={8} md={8}>
<div dangerouslySetInnerHTML={{ __html: text }} />
</GridItem>
You can use the onClick event in your image:
<img src='path/to/image2' onClick={() => {aFunction}} />
ps: if you want to, you can add a className to put a cursor:pointer too.
I think this might help you
first of all, you need to cover the content of blog post (returned HTML from API call) into one single wrapper div.
after that, you can need to get all the elements of blog post using javascript like the example below
const elements = document.getElementById("wrapper").elements
now you can iterate throw all elements in blog post including the images
elements.forEach(item => {
if (item.type == "img")
// do this
})
I will edit the second code example in a few minutes
I am using react-native-webview-quilljs to render formatted HTML text. It works fine on Android and iOS but it isn't supported on the Web (i.e. react-native-web/expo-web). So I managed to strip the HTML tags when rendering the formatted string on the browser (i.e. rendering non formatted text).
Then I got to realise that react-native-web actually uses React to render react-native components on the browser. And React has something as dangerouslySetInnerHTML that allows injecting HTML string to be rendered directly on the browser.
So, is there a way to use dangerouslySetInnerHTML from the react-native / expo project.
Upon close inspection I found that the html tags gets converted to the html entities while rendering on the browser. Take a look at the image below.
Solved it (would rather call it a workaround) by rendering a <div> with dangerouslySetInnerHTML prop when Platform.OS === 'web'.
Example:
Platform.OS === 'web'
? <div dangerouslySetInnerHTML={{ __html: Details }} />
: <View style={{flex: 1}}>
<WebViewQuillJS
backgroundColor={'transparent'}
content={Details}
isReadOnly
/>
</View>
I am working with img tags such that if src unable to fetch the image then alt will show an image which is coming from a link.Basically i want my alt to fetch image from an URL.
1.I tried simply pasting that link ahead of alt
alt="www.some/random/link.jpg"
assigned a variable
render(){
var link = "www.some/random/link.jpg"
return(
<div>
<img src="some_image_source" alt={link}/>
</div>
)
}
I am getting the actual link as plain text instead i need an image.
HTML img attibute:
The required alt attribute specifies an alternate text for an image if the image cannot be displayed.
So alt takes text and display if the image can not be loaded for some reason. alt is not the alternative image for src.
Maybe you can make a component for this, when the src of is not loaded, change the src to something can be load.
I have added onError and which calls a function whenever main photo faces an error.
<img src={main photo} onError={this.addDefaultSrc}
addDefaultSrc(e) {
e.target.src = 'alternate photo'
}
I am not able to share image on twitter using react-share. My code is :
<TwitterShareButton
url={window.location.href}
title={props.data.breadcrumb}
imageURL={props.data.product_info.image_path}
children={<TwitterIcon size={32} round={true} />}
/>
image is being loaded from api.
i have changed imageURL to media and it is still not working.
Can i share image or not?
Seems like you could share this as a base64 url from this response https://github.com/react-native-community/react-native-share/issues/119 which is pretty cool and easy.
So basically set the url prop:
url: "data:image/png;base64,<base64_data>"