I searched and found that I was supposed to use require() but it doesn't seem to be working.
<img src={require("../assets/img/business.png")} alt="business" />
I can confirm that this image path is correct, but on the inspect mode it says the src of my image is [object Module].
Also, when I import the image from the same path, it works completely fine.
Could this be because I am using typescript? I also saw people talking about browserify on another post, does browserify have anything to do with me being unable to use require?
Can u try using .default ?
<img src={require("../assets/img/business.png").default} />
I believe you might need some sort of a loader for to tell your code how to process the image.
Have a look at these following libraries
url-loader
file-loader
Related
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'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/>. When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:
"Error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error."
Has anyone seen this error before and if so what can be done about it?
If you look at the file loader docs there is no mention of being able to load svg files.
You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.
I found out about #svgr/webpack, with it you can import the SVGs like modules and then use them as components.
I posted a similar question today but for some reason, I can't seem to get the paths right on React. I'm trying to import an image but I get this error Can't resolve '../assets/heroImage.jpg' in '/Users/joanaleitaooliveira/repos/web-project/src/components/Jumbrotron'
As you can see, the image "heroImage.jpg" is inside the file "assets" so I'm not sure why is this not working.
the path should be ../../assets/heroImage.jpg
I’m a little frustrated because it took a very long time to get file upload working. I’m working with vue on the frontend and using meteor for backend. The file-upload is done using Meteor-Files from VeliovGroup. The uploading works without issues and the files are getting stored in the .meteor-Directory (default Directory of Meteor-Files) while the app is running in dev mode. But now, how can I get the images or other files I uploaded? The path that is stored in the FileCollection for each file is not right, if I use it for example for the src-attribute of an image. Is there something I’m missing? Is it simply not possible at dev mode?
I tried to set different storagePaths in the Meteor-Files-Settings, tried the "path" and the "link" attribute of the Fileobject in the FileCollection.
<div class="" v-for="Image in getImages">
<img :src="Image.path" />
</div>
<!-- this is the Vue-Frontend where I'm trying to display the images, getImages is the FileCollection from Meteor-Files -->
I Just want to display or get my images, which I uploaded.
Thanks a lot in advance. If you need specific code snippets, just ask
Mario
Does the same thing happen when you just hardcode the src for 1 file? I've had quite a lot of trouble dynamically binding to an img tag in the past. So I wonder, if you just replace <img :src="Image.path" /> with <img src="yourhardcodedfilepath" />, does the image then get displayed, or is it still not displaying correctly?
Okay, I took the wrong absolute path for the config.storagePath. Now it works with the right absolute path. But I still can't access uploaded files in dev, that have been uploaded to the relative path in the temporary build-folder. But I think, I can do a workaround for that.
I'm learning to build static sites using Gatsby v2 and encountering a problem:
When I try to import a logo.svg file from the images folder, it does not work. (See attached screenshot)
I checked in the console, it says the logo is defined but never used? I'm not too sure what exactly i did wrong here. Any pointers would be great!
Your JSX syntax is wrong. It has to be <img src={logo} /> without the double quotes. Have a look at the React docs if that is unclear to you :)