I am using Next.js which loads HTML from an external API.
This API returns HTML with images as follows: The data-src is the actual external URL. The src attribute is base64 encoded.
<img src="data:image/gif;base64,Base64_String.." data-src="https://example.com" />
Next.js renders the HTML code fine except the images. How can i show the images with Next.js? Do i need specific settings or an package? My preference is loading using lazy loading by the way.
Related
I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.
My problem is that the SVG image doesn't display using Image tag from Next.js.
I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.
My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.
I know this is a bit old but stumbled across this post
I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely
Next Cloudinary: https://next-cloudinary.spacejelly.dev/
Given an asset cloudinary-logo-blue that's uploaded as an SVG:
<CldImage
width="500"
height="96"
src="cloudinary-logo-blue"
format="svg"
/>
Hope this helps!
I am following this website https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/ to implement pdf.js using iframe in React
However, in this tutorial, the pdf is a local file in public folder.
<PDFViewer backend={WebviewerBackend} src='/myPDF.pdf' />
How do I use a third party url as the src? For example, I want to display pdf in this url https://arxiv.org/pdf/0905.3531.pdf
I'm loading various images in my site like this:
render () {
const imageUrl = require(`assets/images/${this.props.image}`)
return (
<img
className={this.props.className}
src={imageUrl}
alt={this.props.description}
itemProp={this.props.itemprop} />
)
}
When using yarn start to view my client-side code only, this is working fine. However, in server-side rendering, my images all have src="[object Object]". I'm further surprised that the images aren't being 'hydrated' once the client-side code downloads from the server.
How can I properly load my image src attributes dynamically using server-side rendering?
I don't know exactly why the impact of this was a src of [Object object] for my dynamically imported images, but the issue was my build directory was not correctly referenced in my Express app doing the server rendering.
Changing:
app.use(express.static('/../build')))
to:
app.use(express.static(path.resolve(__dirname, '../build')))
solved the issue.
I have a react app that's hosted on AWS Cloudfront, and the default root is set to index.html, which loads the react app.
So far so good.
I created a new html page page1.html, and then tried accessing it using the full URL, https://my.site.com/page1.html.
Uh oh.
The React app is loaded, and it's router intercepted the URL, and displayed the page not found error. React has no knowledge of the html page, which sounds about right.
If the cache is cleared the page1.html file loads correctly, however as soon as the react app is loaded, the react router starts intercepting the page1.html URL.
Why is that? I kind of expected the direct URL to load the html file bypassing the react app.
And is there a way to add an exception in react router to allow the page to be loaded without being intercepted?
I am using zf2 and angular js for my frontend. ZF2 controller makes an api call and returns the data to view(phtml file). In phtml file I am using php to generate meta tags and rest of the content of the page is generated by angular js. Do I still need to serve prerendered pages to google bots since meta tags are already generated by php and I think google bots needs meta tags?To test prerender.io i installed it on my server to generate static page but it is unable to load css, js and images because I am using css, js and images as relative urls in my html page.