some images are not loading in react app even they exists - javascript

I'm working on a react app. Everything works fine in development. When I make build using npm run build and test it then some images on page are shown and some images are simply not found. I can see that user avatar image is shown but all other images are not shown. I inspected code in browser and checked src of image. Path is good and image is also available in ./static/media/card-1.7a6bc100.jpg but not showing on page. Then I inspected code of user avatar image, src looks similar and that image is working fine. I'm not sure why its behaving like this. Below is my source code looks like.
import marc from "assets/img/faces/marc.jpg";
And then my img tag looks like:
<img src={marc} className={imgStyle} alt="..." />
it always spits out ... these dots which means image is not loaded, but image is available there and path is also perfect when I inspect this image in browser. Can anyone help me why it is doing this on production? It's been hours while working on this but didn't found any solution.
Any help will be highly appreciated.
Thanks.

If you are using create-react-app, assets will also need to be served inside src. You should also reference the image using relative path, not absolute path. For example:
image is under src/assets/img/faces
your code is under src/some-folder/your-code.js
// your-code.js
import marc from "../assets/img/faces/marc.jpg";

Put your images in public/images/ folder and use like this
<img src="/images/logo.png" className={imgStyle} alt="Logo" />

Related

React Router Dom v6 - Image not found in nested routes

In my tsconfig.json file, I have a "compilerOptions":{baseUrl} that enables me to look for images in public/images/foo.png like this <img src='images/foo.png/>.
Which is still working, except in my nested routes. It's working in line 16 and other routes that isn't nested, but not in line 17 even though I copy pasted it to make sure they have the same spelling and caps.
I've also tried looking into Browser's dev tool's inspector to see if they have similar src, which they do but the one has problem loading the image. working src not working src
You should always precede the image path with a forward slash '/'
like this
<img src='/images/foo.png/>
NOT like this
<img src='images/foo.png/>
When you tell the browser to look for images/foo.png when the current route is /foo/bar, for example, the browser will search for /foo/images/foo.png.
To avoid this, add a slash at the beginning of the path (e.g. images/foo.png would become /images/foo.png).

what is the difference between setting a files src in html vs javascript

Quick version:
if i make a div, and put an image in it it works just fine.
this
<img id="main_image"; src="~/images/tea_offer.jpg" style="width:100%; height:100%" />
gives
localhost/images/tea_offer.jpg
but then i try to change the image with javascript
this
document.getElementById("main_image").src = "images/cake.jpg"
gives
localhost/home/~/images/cake.jpg
and the image just doesn't work. i think this ====> localhost/home/~/images/cake.jpg. is wrong.
please help.
Long version.
i have a simple website, it has a background image and a blue box. the background image changes when you click on the blue box. images are stored locally in wwwroot.
when the blue box is clicked the background image simply goes white and my computer is unable to find the image it is looking for.
proof the images are stored in propper place with propper name
How can i get the javascript to find an image like html does?
Instead of adding "~" to your path in javascript version, use "/" so it be "/images/cake.jpg", to query from root.
More info: https://coderwall.com/p/8nhqeg/relative-paths-from-the-root-in-javascript
Updated Info:
You need to provide absolute link to you image (which would vary from DEV env where it is probably localhost:80, against published Prod env http:....com/). So it would be best idea to have the BASE_URL in a static variable, and prepend it to all the calls to your images.

Putting a image in a pdf generated with jsReport

I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.

how to get images from a local folder to display on div element html?

I am having few jpeg images on "C:/images/". I would like to slide show these images on a web page.I am using java code to get the right path of the image folder and jsp as front end having html div element to display the image. I have tried like this to display single image but failed, could anyone please help me out
<div id="image" style="background-color:yellow; height:200px; width:100px;float:left;">
<img src="C:/Desktop/Images/Image1.jpg" style="height:200px; width:100px;floatleft;">
Same question in this post:
Why can't I do <img src="C:/localfile.jpg">?
but you can use "../" to locate the correct path.
http://www.pagetutor.com/html_tutor/missing.html
But why you don't want to make a folder on your on application. It is more easier than access it on your desktop, etc.
Why not just move the image to your root folder and link it?
If you need it in the C:/ folder, try doing what Newbie said, and use ../ to find the correct path.

Windows 8 adding images

I'm trying to add images to my hello world app (HTML / JavaScript).
I am able to add the standard images (logo.png, smalllogo.png etc), but adding:
<img src="images/testImg.png"> won't show, when testing the app.
The image is located in the images folder, but won't show. What's wrong here?
Apparently the image needs to be added by clicking "add->existing item->image". Then it gets loaded and will be available in the app.

Categories

Resources