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}
/>
Related
I am currently using Next.JS to create a static website with the main objective to have a very good SEO-optimized website.
Everything works fine and the website is correctly deployed with Vercel, but I have noticed that part of the content is not present directly in the HTML files.
For instance, I have a component that loops over an array of data, using the array map method, like this:
{imageTexts.map((image) => (
<ImageText
key={image.title + 'TitleImage'}
title={image.title}
description={image.description}
size={imagesSize}
image={image.image}
/>
))}
Once the website is deployed to Vercel, I search inside the HTML file for the information/strings contained in the array of data (imageTexts), but I can't find them. I guess Next.JS uses javascript to target some sort of div and then loops over its own JSON file to dynamically display content.
For me, this seems to kill a lot of the SEO advantage that static websites have over SPA. Is there any way I can have those strings directly inside my HTML files?
I am still not 100% sure this is caused by the map method, but I don't find any other explanations. Especially because other dynamically loaded components don't have the same problem. For example, this component string can be found on the HTML file, without a problem:
{title ? (
<Text
type="h2"
textAlign="center"
>
{title}
</Text>
) : null}
If you are mapping over ImageTexts on the server and that component renders HTML tags, then that HTML should be sent on the first-page load, and you could see it if you do CTRL+U or disable javascript.
Ok, I have just found that the reason. It has nothing to do with the map method. I was actually using the <Remark> component from library called react-remark. It seems it does not play well with Next.JS
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.
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;
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.