Trying to pull an image from Umbraco and display it using React.
I can pull all the text by doing this for example -
{String(this.props.data['carouselUnderImageText'])}
{String(this.props.data['carouselLink'])}
But when doing an image -
<img src={this.props.data["carouselImage"]} or <img src={String(this.props.data["carouselImage"])} />
Those two won't work, it seems to return me the url umb://media/8990dd19cfb746e0bea4baec5df20d01
Any ideas on how to solve this? I have not found enough documentation to fix this issue when using Umbraco with React.
If there is anything else I can show in order to help answer this question just put it in the comments and I will update the question.
Many Thanks in advance.
You can get the IPublishedContent of the image file by using the TypedMedia function in the Umbraco Helper, you can then access the images URL to be passed through to react.
var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
Udi.TryParse(carouselImage, out var carouselImageUdi); // this parses the umb://media string into a UDI to be used in TypedMedia.
var imageUrl = umbracoHelper.TypedMedia(carouselImageUdi).Url;
Related
I am using NEXT/Image component and facing this issue:
When I open the source code on chrome the image src is this:
https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100
but when I make google crawl the website in search console and see the code how google sees it, I see the image URLs like this:
https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg& amp;w=384& amp;q=100
The URL has changed the "&" character to "& amp;" which is stopping google from indexing the images because this URL gives an error of:
400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST
and google is not able to crawl these images and index them because it seems like a broken link to it.
Any idea why this is happening?
Thank You.
I came a cross this issue today as well. I found an answer to this question solves my problem. Create a loader function and pass it to the image component.
const loaderProp =({ src }) => {
return src;
}
<Image
src={currentImage.imageurl}
alt={currentImage.imageurl}
layout="fill"
className={styles.imageSize}
loader={loaderProp}
/>
The task is simple: display a local image in a reactjs app based on dynamic data.
This is what I tried (assume path_to_image is derived dynamically):
<img src={require(path_to_image} />
generates an error:
Error: Cannot find module '../../images/logos/somelogo.jpg'
Without the require:
<img src={path_to_image} />
generates a broken image.
These two methods seem to be what people are doing, but no luck here. How do I solve this?
import image from "./path/to/image.png"
If you plan using more images in a dynamic way maybe you should store their paths in a db and then query the db for the respective path. Actually that's how it's done with a CMS for example. Even if you store the files on the same hosting, you would still save their paths to a DB instead of hardcoding.
Use this:
import SomeLogo from '../../images/logos/somelogo.jpg';
You can then use it like this:
<img src={SomeLogo} />
As for multiple images, you could store them in a JSON array, and then loop through them and add each image.
This does it:
let imageSrc = require("../../images/logos/generic.jpeg");
let dynamiclyGeneratedSrc = ...;
if (dynamiclyGeneratedSrc !== undefined) {
imageSrc = require(`../../images/logos/${dynamiclyGeneratedSrc}`);
}
I am trying to load a PDF file as an image into a SVG within D3.js, and using React. I have managed to use react-pdf to load the pdf file as a dom element. Through the network tab, I see that 'pdf.worker.js' has generated a blob as a jpeg image at a URL (possibly using createObjectURL). I want to access this jpeg image, but I don't know how to, and I haven't found an answer.
https://imgur.com/PuSSJqC
Can anyone help me please?
I tried getting accessing the canvas element directly from the DOM and using importPDFCanvas.toDataURL(), but this image is blank.
onDocumentLoadSuccess = () => {
const importPDFCanvas: HTMLCanvasElement = document.querySelector('.import-pdf-page canvas');
const pdfAsImageSrc = importPDFCanvas.toDataURL();
};
<Document file={importPDF.pdfSrc}>
<Page
className="import-pdf-page"
onLoadSuccess={this.onDocumentLoadSuccess}
pageNumber={1}
/>
</Document>;
I expect there to be a way to access this image or the URL through the pdf.js api, but have no idea how to get it. Sorry if this seems like a newbie question, would appreciate any guidance on where to look or what to look for!
Edit:
Solution was just to use onRenderSuccess instead of onLoadSuccess.
My little application is written in reactjs, on a page it will update title / description based on the real object that user selected like this photo. The new title and description are display correctly but when sharing on fb, the values are not loaded correctly (the value is from old html templated) - go to facebook and paste the url or use fb debugger the values are from static html page.
Have anyone had this issue and have "fixed" it ?
Thanks for any recommendation !
Facebook ignores JavaScript, so dynamic OG tags are not possible. You can solve this with Server Side Rendering or https://prerender.io/, for example.
You can pass as parameter in url (abc.com?title=awesome&desc=flower), and in og tags use that parameter to make dynamic.
Implementing EasyCaptions on my WordPress blog and I’ve hit a brick wall. Any help would be appreciated. I’m using SWFobject to embed videos. I’ve pasted this code: http://pastebin.com/0ZMSr0Bz into my header.php and this embed code in my posts:
<video id="video-html5" width="480" height="320" controls="controls"
source src="[url to video]" />
</video>
The problem is the implementation only works for the video defined here:
var flashvars = { file:'[video url]', ...
All other videos embeds do not work. I've tried using a playlist but that did not solve the problem. How do I solve this? Do I need additional JS or PHP code to add to the file parameter?
[edited post]
I just re-read your question and looked at the pastebin. The video URL you're using is an HTML file: http://vidbull.com/embed-iqkhawkkx1rn-640x318.html. You can't load an HTML file as a video.
Try it again using a proper video URL (MP4, F4V, OGG, etc).
-- UPDATED based on comment from OP --
The issue is that you're hard-coding the video URL in your WordPress header. What you'll need to do is use a variable instead. I suggest using WordPress' "shortcode" API, which will enable you to pass variables via a custom shortcode.
Define your shortcode in WordPress, something like:
//[easycaptions]
function embed_easycaptions( $atts ){
//your custom PHP code here, using the passed $atts
}
add_shortcode( 'easycaptions', 'embed_easycaptions' );
Then when authoring your WordPress blog post, you add the custom shortcode where desired, such as
[easycaptions url='http://localhost/wordpress1/wp-content/uploads/2012/10/Sheldon-in-a-Dress.mp4']
Check out the Shortcode API page for instructions and examples. It's a pretty powerful system.
The solution lies in NOT hard-cording the video url in the header.php. Here is what worked to solve this. I first created a custom field in wordpress, named it thinema, and then set the value of the custom field to be the embedded video url in the post. Then edited this code into my header.php
flashvars = { file: '<?php echo get_post_meta(get_the_ID(), thinema, true); ?>'...
I've updated the code in pastebin. Hope this is of use to someone! You can view the implementation here.