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.
Related
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?
I'm using a basic React installation on Laravel 5.8. My blade hoolaMundo.blade.php identifies the file css/app.css and js/app.js, but it doesn't show anything in the browser.
holaMundo
<html>
<head>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="Example"></div>
</body>
</html>
<script src="/js/app.js"></script>
Component
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from "../../assets/js/components/Example";
class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
export default Example;
if (document.getElementById('Example')) {
ReactDOM.render(<Example />, document.getElementById('Example'));
}
Web Result
extra information
node -v :14.7.0
php -v : 7.3.5
npm -v: 4.14.7
Done
npm install
npm dev run
I would usually use the comment section, due to my insufficent reputation I'll need to type a big answere.
thing, it would be greate to see your mix file? Did you use .react? https://laravel.com/docs/5.8/mix#react
Laravel does sometimes behave odd, no ofense I love it, but I would recommend using the asset function to refrence your styles scripts etc. Then you make sure everything is send out properly.
I would put the script tag within the html tag.
it would be great to know how you installed react? Did you use larvel or node way?
How I do it.
I usually cd into my resource/js folder and install it via
npm i create-react-app myapp
Then I go into laravel mix and paste in:
.react('resources/js/myapp/index.js', 'public/js/myapp.js');
If you cannot run npm i create-react-app myapp then yoou need to install it first. Checkout here: https://www.npmjs.com/package/create-react-app
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")
I've been trying to make Masonry (also tried Salvattore but none of them will work) to work for a good few hours now, I've followed multiple tutorials and examples but it just won't happen for some reason. I'm using Bootstrap's grid system and angular to create the number of columns.
EDIT: I created a simple fiddle which actually seem to work: https://jsfiddle.net/j57vnaa2/1/
Question is, why doesn't my original code work?
I've included Masonry through the CDN, I've checked the console that the script has loaded and indeed it has. Also did it via bower and NPM to test if it worked with those but it yielded the same result.
I've set the class js-masonry to my container, which is a row with grid columns looped out via ng-repeat. Then I have set the data-masonry-options='{ "itemSelector": ".grid-item" }' as well as applied the class grid-item to my columns. But it just doesn't want to work, it's not doing ANYTHING.
I don't know what else that could be wrong, I've searched and searched the web but come up with no solution.
Is there something obviously wrong here?
<div class="row padding">
<div class="col-sm-12">
<div class="grid js-masonry row" data-masonry-options='{ "itemSelector": ".grid-item"}'>
<h1 class="text-center">Similar movies</h1>
<div ng-repeat="movie in similarMovies"
class="col-xs-12 col-sm-6 col-md-3 grid-item cut-off">
<a href="#/movies/{{movie.id}}">
<figure>
<img ng-src="{{getSrc(movie.poster_path)}}" alt="{{movie.title}}"
class="image enlarge">
</figure>
</a>
</div>
</div>
</div>
</div>
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...
}