I have a problem with images in create react app i can not use "webpack import" way of including images because i am uploading them and then i want to show them.
my code of img is simple
<img src={file.path} alt={title}/>
which gets rendered as:
<img src="/public/cdn/files/offer_photo/a70318372a62066c492b4ebdd34491af8bd9bb15.jpg" alt="rez5d9e85_id20150826_036" class="MuiGridListTile-imgFullHeight-620">
as per docs in development i should use /public folder to let webpack server to server it. But it seems it doesn't
the file is in place
i have tried to add process.env.PUBLIC_URL pre-fix to dynamically added img src ..did not helped.
Thank you in advance for any suggestion how to solve this issue.
have you tried to assign the import of the image to a variable? example
const image = require ('path to image')
and then:
<img src={image} />
Related
My local images are not showing. I have an application with just an image and it does not show although it does show when I inspect with F12. My App.jsx only has:
return (
<>
<img src={LOGO} alt='' />
</>
)
I tried importing the image like:
import LOGO from './assets/portfolio_logo.png'
I tried using require(); I tried having the images in the public folder; I tried having them in an assets/ folder inside the /src folder. Nothing worked. Do you have any idea what might be done to make images show? Thanks in advance for any help you can provide.
Try keeping all your images in a public folder as shown below:
You can add the following code to access the image from any react component,
<img src='/assets/images/Call.svg' />
Keeping your assets in a public folder ensures that, you can access them from anywhere from the project, by just giving '/path_to_image'.
The problem was another component messing with global styles.
I just upgraded my React version to 17.0.2.
Unfortunately, some of my code is not working. Image is not displayed.
This code is one of IMG tag in jSX, and what I did is set 'Src' path dynamically.
It was working without any issue on my previous React version.
Is there any solution to fix this issue?
<img src={require(`../${config.path}/${config.icon}`)} alt='App Icon' />
In React.js latest version v17.x, we can not require the local image we have to import it.
like we use to do before
require(`../../${config.icon}`);
Now we have to you have to put all your images into public folder and then
<img src={`../${config.icon}`}></img>
this method will work.
I've built an ASP.NET Core solution that is mainly just a shell for a React app. It's a card game that uses svg image files to represent the cards. When I run locally, the cards display as they should.
The issue is that when I build a Docker image and serve it up from Docker Desktop the images no longer show--just a placeholder where each would go.
The each card is the result of a small function:
export const Card = (params) => {
return <img src={'./cards/' + params.card + '.svg'}
onDoubleClick={() => { params.action( params.card ) }}
/>
}
My best guess is that the needed relative path in the docker image needs to be altered somehow so the files can be found.
In the VS solution, the folder structure looks like the following:
root
ClientApp
public
Cards <== card image svgs are here
src <==js code here
Any suggestions as to what might be causing the Docker version to not display the images?
Perhaps my better questions might be if the structure is something I should be managing in Dockerfile(?) or what a good way to see the structure Docker is using to arrange the files in the container?
Edit
I've noticed it doesn't seem to recognize a sub-folder (or I'm not referencing it correctly). Any images I place is the public folder (parent of cards) show.
To reference svg in public use:
<img src={process.env.PUBLIC_URL + '/yourPathHere.svg'} />
I had the same problem, deploying react with nginx into a docker
I used svg in my react app as an imported entity, so I imported the image and placed it as an variable in img.src attribute.
import Plus from 'svg/plus.svg'
.
.
.
<img src={Plus} />
I used create-react-app to play with react. I noticed that no matter what I type in after localhost:3000/ (which is the default url on dev machine) I always get the content from localhost:3000
This means I cannot access images so that sort of means I can't really do anything with it.
Is this a bug or is it some awesome new feature that I just don't understand? How can this be switched off?
Create React App uses historyApiFallback for the webpack-dev-server, which means that all requests that give a 404 response will fall back to load the index.html file.
If you e.g. add an image to the public folder, you can see that the image takes precedence over the index.html file.
You can also import the image with the help of Webpack and use the import as src in your code, and Webpack will make sure the image ends up in the final build folder for you.
import img from './image.png';
you can use
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
for more information please refer Adding Assets Outside of the Module System
How do I add a simple svg image to my login page? I've tried img ng-src and div list card and a simple css class called logo but my image is never shown. I never get a file not found but I wonder if I'm placing the image in the correct location - any suggestions?
Thanks!
Look in your dist folder, and check where your images are in relation to your html folder. For me, it was up two folders:
<img src="../../icons/myicon.svg" />