I am trying to create similar components on my webpage, so instead of hot coding the data i decided to map through an external data(an array i created in an external module in the same project folder). ` {
workflow.map((w) =>{
return(
<div className='process'>
<h2 className="processName">
{w.name}
</h2>
<img src={require(`${w.image}`)} alt="" className="processImage" />
<h4 className="processDescription">
{w.description}
</h4>
</div>
)
})
}`
Everything worked fine until i added images.
i got this error instead
error message
i feel am doing something wrong. please what is the right way to this?
Related
I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
I'm still pretty new to react and I have an application that I'm trying to deploy to the web. I've noticed that when I use 'npm run build' it doesn't populate my chunk.js scripts with a '.' before the location. That's an easy fix, I just add the '.' manually and move on with my life. But now it's doing the same thing with images, and these are rendered dynamically so it's not an easy manual fix once the build is run. I've got code below.
For example: <script src="/static/js/2.4724d625.chunk.js"></script>instead of <script src="./static/js/2.4724d625.chunk.js"></script>
I tried manually entering the period like so:
const Certificate = ({
firstName,
lastName,
completionDate,
userToken,
division
}) => (
<div id="box" className="container-fluid text-center">
<div id="nice-border">
<div className="row">
<div className="col-12">
<div id="sov-logo">
// this is where i manually put a . before the logo directory
<img src={`.${Logo}`} alt="Logo" />
</div>
</div>
</div>
but that didn't help at all. It seems that the build just ignores that. So how can I get these images to work properly once it's deployed on a server?
This is how the image looks when I inspect it in the browser: <img src="/static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> and as soon as I add a dot like so: <img src="./static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> it loads the image just fine. How do I fix this?
In your package.json, set "homepage" to "."
Then you can build and deploy correctly.
I created a React app that lets me generate notes/post-it notes to a board. Right now, when I add new notes, they appear in a single column. How do I use Bootstrap to make the notes appear in multiple columns?
Apologies if my given background info is lacking. I'm a little bit lost and am not sure what to include and not include.
In my index.js file I've added...
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
In my board component file, I currently have the following under my render function...
render() {
return (
<div className="board">
<div className="row">
<div className="col-sm-6 col-md-4 col-lg- col-xl-2">
{this.state.notes.map(this.eachNote)}
</div>
</div>
<button onClick={this.addNote.bind(null, "New Note")}
id="addNote"> Add </button>
</div>
)
}
I am learning React and am facing an issue, I am not able to reference the images that I have in.
In my code directory I have src folder in which I have components and images directories.
In components I have a component called Header.js where I am trying to access an image from the src/images directory but its not getting displayed.
I have lots of images to display and I am not sure how do I achieve this.
<div className="brand">
<img
className="logo"
src= "shopping-cart/src/images/Veggy.png"
alt="Veggy Brand Logo"
/>
</div>
I have tried removing src or adding ../ but doesn't seems to work.
Can anyone please help me?
Use import to import the image
import veggy from "shopping-cart/src/images/Veggy.png";
And then pass veggy to src
<div className="brand">
<img
className="logo"
src={veggy}
alt="Veggy Brand Logo"
/>
</div>
Or use require directly
src = require("shopping-cart/src/images/Veggy.png")
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}