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.
Related
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.
I'm attempting to create a site called Mixer and deploy it via heroku
After uploading the site to Heroku, I notice the dynamically loaded images aren't loading, but the imported images are. The code I'm using is:
import Image_Not_Found from '../img/drink_not_found.jpg'
<img src={`../img/${newDrink['image']}`}
onError={(e) => {
e.target.onerror = null
e.target.src = '../img/drink_not_found.jpg'
}}
alt="" className="drink-card-image"
></img>
Now, the error image shows up, but the rest don't. Here's my layout.
>Public
>img
>{images.jpg}
>drink_not_found.jpg
>src
>components
>card.js
The drink_not_found.jpg is loading fine, and when I'm on my local computer the rest of the images are loading as well, until I deploy to heroku. Any thoughts?
So i'm working on a react project and i want to use an image which is stored in my computer
i made the following code
<img src='my_image.png'/>
however it doesn't show in the browser as shown below
see image
upload your images in your public folder then access it
eg:public/images/p1.png
<img src='images/p1.png'/>
https://codesandbox.io/embed/amazing-bouman-x3mnr?fontsize=14&hidenavigation=1&theme=dark
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to :
<img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src={charlie1} />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
{
"homepage": "https://xyz.github.io/charlieReact"
}
App.js
<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />
So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src