I am uploading images using multer in a folder and save the path in MongoDB. However, when I try to use that address to show the image in react, I get a blank page (rendering error).
So, something like <img src={require(shop.image)} /> gives me a blank page.
Here is the .jsx code
shops.map((shop, key) => (
<div className="shop" key={key}>
<img src={require(shop.image)} alt="" />
<div className="shop-content">
<h1>{shop.name}</h1>
<p>{shop.street}</p>
<p>ID: {shop._id}</p>
<button onClick={() => { changeEdit(shop) }}>Edit</button>
<button>Delete</button>
</div>
</div>
)
)
Here is an image with a document from the collection
This is the error that I get
This is the directory tree
Generally speaking, what do I have to do in order to fix my problem and be able to show these images without getting a blank screen?
If I put the the directory as a string ( src = {require("../../../")} ) it works perfectly. So the address is correct, but react still won't show my image.
I have fixed it. I have used my server side to host my images and get links of them by serving the local files, using app.use( "/directory", express.static("directory")) and now I can easily access and render any image by using links like localhost:3000/shops/image.png etc...
Related
I am new to React with only about 4 months of experience, and I am facing a problem when referencing a group of images in the same directory as the code below, in order to render them on the webpage. I am getting a module not found error whenever I pass their paths from the JSON file (as an object, but still a string nevertheless) and everything works fine when I pass a single path through my function
this is the code for rendering the images one by one.
<div className="cards col">
{Pagedproducts.map((item) => (
<div id="card" key={item.id}>
<div className="image">
<img
className="prev"
src={require(item.preview)}
alt={"Image not rendering"}
/>//item.preview returns a path for the image from this file's perspective
</div>
</div>
))}
</div>
using this same code but passing the path right away and rendering the same pic on all items WORKS! but i logged the item.preview variable and it literally shows the exact same path passed to the require function.
<img src={require('./productPic/IMG-1.jpg')} /> //doing this works fine but it's not what i'm trying to do
I am aware of the other methods that try to solve this but none of them use an object that holds a path to the image.
when i run my code i get a Module not found error
Uncaught Error: Cannot find module './productPic/IMG-1.jpg'
I also tried making it a string and passing the variable in it as such
<img src={require(`${item.preview}`)} />
yet also this does not work.
After React code is compiled, it will look into the /public directory for any images.
put your photos into the public folder and it'll work.
Here is the working example. codesandbox.io
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
I am learning react, hence I am new to react though not new to development. I was creating a slider in which the <div> have a background that is to be set using already present images. I think there is mistake somewhere in dynamically allocating the directory of the images although i am not entirely sure.
This is short image of directory
image of directory
I have details of images stored in a const slides in which cover holds the name of image( like cover1.jpg). When I console.log(item.cover) I got the correct names of images, but I can't seem to implement it to correctly represent the directory of images
This is the current code that is written in featured.js
slides.map((item)=>{
return(
<div key={item.id} className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
)
})
And previously i have tried
style={{background:'url(/images/covers/${item.cover})'}}
and
style={{background:'url("images/covers/${item.cover}")'}}
with many different combos of directory
How can i get the images to show and what am i doing wrong. Any help is well appreciated.
You're not using template literals correctly. You're using ' instead of `.
style={{background:`url(/images/covers/${item.cover})`}}
I don't Know Why! but it worked when i added another nest
slides.map((item)=>{
return(
<div key={item.id}>
<div className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
</div>
)
})
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I have a lot of images that unfortunately have spaces in their URL's. These are submitted through user input in another system and saved to a database.
I'm having a problem with angular's management of image sources. It doesn't seem to like spaces or "%20" in the ng-src or src attributes.
This
<img ng-src="{{smallImg}}" alt="" />
Will output this
<img ng-src="" alt="" />
While this
HERE
will output this
HERE
Is there a way to do this without having to go back and rename all these folders?
I got the answer, it is working for me.
You can get this like:-
$scope.smallImg = "http://example.com/path to my/image with/spaces.jpg";
when you bind this do like
<img ng-src="{{smallImg .replace(' ','')}}" alt="" >
I haven't been able to make <img> src empty when using %20, but perhaps you're using an older version of Angular.
$scope.smallImg = "http://www.google.com/my images here/pic.jpg".replace(/ /g, "%20");
...
<img ng-src="{{smallImg}}" alt="Pic goes here" />
Here's a working demo: https://plnkr.co/edit/hTFw8rAg0CRxDGjROjjp
(tried to find an image on the web that had a space in the name, but no luck)
Well, as it turns out it was a secondary plugin, magic360 that was interfering with the image source