When import folder, vs-code-image i can see tips for what i want to import, in this case it's folder "images" but when i go inside folder
../src/images/
i see nothing, not a single file or image, vs-code-image inside this folder - five images with .svg, and one with .png
tried to use
<img src={require('./images/')}></img>
but still nothing...
Related
I am using Lokesh Dhakar's Lightbox on my page. I renamed the css and js folders to be _css and _js on my server and all works except I also renamed the "img" folder to be "_img", and the image icons (close, loading, prev and next) don't work. Are you not able to have this folder be named something other than "image" or "img"? Thanks.
I did exactly that, changed the name. Just make sure in CSS and JS and you have the correct links to the new folder.
All the images are displayed as broken image icon on my React app.Here I'm trying to display this image but this too appears as broken
If you want to call images inside your src folder you have to import it first.
import neonSpace from './neon-space.jpg';
and alter you can use it in your like this:
<img src={neonSpace} />
If you want to call the image only with the URL you must have to put your image in your public folder. (sibling folder of src)
<img src='./neon-space.jpg' />
Hope it helps!
I have a component that represents a "badge". There are hundreds of types of different badges. Every badge is an individual SVG file. The badge component receives a slug for the badge it would need to use. The slug matches the file name. For instance: best-cheesecake would hint we need to display best-cheesecake.svg in the badge control.
Up till now, I've been loading svg images using:
import TestSVG from "../../images/test.svg";
and displaying them using:
<img height="50px" width="50px" alt="my-test-svg" src={TestSVG}/>
It's critical to understand I'm using WebPack and all images get their filenames hashed.
My question is about the best practice if my control needs to load one of the hundreds of SVG files. can my import dynamically using the filename string as it's given to the control via the props where those files get a hashed filename by webpack? Is there a better way? Obviously there has to be a way other than importing all SVG files in the folder...
use require.context concept you can import all the files located in a directory.
Below is the reference to what I have used earlier -
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('path/to/the/folder', false, /\.(png|jpe?g|svg)$/));
Now you can retrieve a particular image by its file name as below
<img src={**images[svg]**} className = {imgClassName} alt = {svg} />
where svg is filename with extension, ex. file1.svg
My solution was this:
I moved my 500+ badge SVG files from /src/images, where I keep all images into /src/images/badges
I have no explicit reference to any of the badge SVG files in my code so WebPack ignores them when creating the dist folder (both dev and production).
I installed WebPack's CopyPlugin and I use it to force the copy of /src/images/badges/*.svg into a badges under my default dist folder (it doesn't care they're not explicitly used in my code)
In my code, I can now use this successfully <img src={"/badges/" + this.props.badgeName + ".svg"}/>
Before i added the id of the object to the url the images loaded fine but once i added the ID The local images are not loading but url images work. Everything is returning fine in the console and it is the correct pathname.
I have tried using require but it just gives me a huge error with all of my images and some css.
I expect the corresponding image to show
This how the image file looks in my data
img: "img/product-8.94-1.png",
< img src={require(`../${img}`)} className="img-fluid"
alt="product"/>
This is the route and Link ( i added id)
<Route path="/details/:id" component={Details} />
<Link to={`/details/${id}`}>
Probably you are using relative paths to images in your app, if you changed route path from http://demo.com/details to http://demo.com/details/id the image cannot find the correct path, you got one extra folder details/id.
You don't show as how you get the path to the image, but if your image is in your assets folder of reactjs app, then import it like a component.
import img from "assets/image.jpg";
and then in component add it img src tag like this:
<img src={img} className="img-fluid" alt="product"/>
If you get images from db, then make sure you use full path to the image.
https://codesandbox.io/s/priceless-ardinghelli-sp0yg
im using themes in an app im doing, and need a global css/img/js folder
i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.
I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css
With some css that looks like:
...
body{
background-image: url('../img/file.jpg');
}
...
if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the
i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.
any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images
when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.
things that dont work
url("img/file.jpg")
url("/img/file.jpg")
url("../img/file.jpg")
url("/../img/file.jpg")
url("../../img/file.jpg")
thanks.
In your CSS file
body{
background-image: url('/img/file.jpg');
}
This will use the root area to find the image in /app/webroot/img/file.jpg
CSS has urls for images relative to the path it is placed in.
CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)
I have not tried that but the cookbook says:
If you want to keep your theme assets
inside app/webroot it is recommended
that you rename app/webroot/themed to
app/webroot/theme.