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
Related
I'm building a website with Next.js and Mantine. I want to put the Image with my logo in my Header so I used Image from next/image but the problem is that it's not working when i deploy it. It works perfectly on localhost.
Deployed:
Locally:
Code of my image that is clickable
`
<Link href={"/"} >
<Image src="https://cdn.p33t.net/ZKAVDSZEFH.png" alt='logo' width={42} height={40} />
</Link>
`
I tried using the local image but it was same. My image host is already added in the next config.
I expected it to be working same as on local machine
I fixed it by using Image component by Mantine instead of Next
im trying to upload an image on my website in the card using bootstrap but every since i run the code an image of a folder is showing up instead of the image.I'm using React.js
I store images in public folder, image name is a number from 1 to Image quantity, so I can get image with
<img
ref={this.imageRef}
src={process.env.PUBLIC_URL + `/images/${this.props.index}.jpeg`}
alt={`image #${this.props.index}`}
/>
When I run it on my local npm server images are rendered correclty so I can see them, but when I try to open my gallery from my web site deployed with AWS Amplify, they are not loaded, I see only image alt and image logo.
You can check it out at https://www.diamondcoring.ru/gallery
What's wrong with it ?
I don't know why, but the problem was in file extension .jpeg - it is not handled. .jpg or .png work fine
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
After uploading the image using ng-file-upload to https://angular-file-upload-cors-srv.appspot.com/upload
,I get in response only the image name.
Now, if I want to render the image in html
<img ng-show="createRecipeForm.file.$valid" src="{{response.filename}}" class="img-rounded" height="100">
or
<img ng-show="createRecipeForm.file.$valid" ngf-thumbnail="{{imageArray[$index]}}" class="img-rounded" height="100">
How do I get my image here? I am using this for demo purpose and need to get it from my local computer only for now.
I see can not give path to a drive on computer here for src.
So, how do I render the image in html given that I have the file name.
If you are storing the file using a web server, you should have access to the relative path of the server to use before filename in src="{{response.filename}}"
Check where in the folder structure you are storing them, then you can try: (e.g.)
src="/AppData/{{response.filename}}"