I have given path of images in my js file like this image: "/images/mussels.jpg", and imported file in a component in react app. everything looks fine in localhost/3000 but when i uploaded app on web, images path is not right and images are not shown on the web. also when I check in console, there is style attribute empty. but I gave style in ,my css file separately.
This is my SampleFishes.js file with data like this:
const sampleFishes = {
fish1: {
name: "Pacific Halibut",
image: "/images/hali.jpg",
desc: "Everyones favorite white fish. We will cut it to the
size you need and ship it.",
price: 1724,
status: "available"
}
Export default SampleFishes;
Then in Fish component:
image is imported via this.props like this below:
<img
src={this.props.details.image}
alt={this.props.details.name}
className="img"
/>;
which are coming through App.js and Samplefishes are imported there like this:
import sampleFishes from "../SampleFishes";
and
{
Object.keys(this.state.fishes).map(key => (
<Fish
key={key}
details={this.state.fishes[key]}
ordkey={key}
addToOrder={this.addToOrder}
/>
));
}
In console.log, HTML element shows image path like this:
<img src="/images/hali.jpg" alt="Pacific Halibut" class="img" style="">
But image on the web is not shown. I have given style in css file to .img className as
.menu-fish .img {
float: left;
width: 150px;
margin-right: 1rem;
}
One guess here is that you have to change your image paths to "./images/mussels.jpg" when you deploy your app to the server. This is my best guess on the little info that we've got here =)
I figured it out. In build folder, there is index.html file which has path to css like this href="/Shop-Fish/static/css/main.4b89f08f.chunk.css"
So that means images will have the path like the same as src="/Shop-Fish/images/prawns.jpg" which in local host case was only src="/images/prawns.jpg" but when it was build for github gh-pages, it attached the repo name with it in all refs and images also needed the same repo name ref first and then images path. So thankyou all who tried to solve my query.
Related
I am working on a Gatsby site and sourcing my content from Sanity.io. Some of the images I am getting back from the Sanity.io CDN are of a significantly reduced quality when compared to images that I source through my own file system. I think it has something to do with an incorrect image size being set but I cannot figure out why it is setting this image incorrectly. I am attempting to render both of these elements using gatsby-image.
A screenshot of the images loaded next to each other:
My graphQL query:
const HEADER_QUERY = graphql`
query HeaderQuery {
HeaderImages: sanityHomepageSettings {
heroOverlayImage {
asset {
fluid(maxWidth: 300) {
...GatsbySanityImageFluid
}
}
}
}
LocalHeaderImages: file(relativePath: {eq: "happy.png"}) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`
Where I am rendering both of these images:
<div style={{backgroundColor: 'white', width: '100%'}}>
<Img fluid={data.HeaderImages.heroOverlayImage.asset.fluid} />
<Img fluid={data.LocalHeaderImages.childImageSharp.fluid} />
</div>
When I inspect the image elements in my devtools I can see that the currentSrc for the image coming from sanity is as follows:
https://cdn.sanity.io/images/<environment-removed>/production/<long-name-removed>-275x132.png?w=150&h=72&fit=crop&fm=webp
It looks like an improperly sized image is being set here because the width and height are ~50% of the original image. As you can see from the string above, w=150&h=72 appear to be sizing the image.
Lastly, I am getting the following warning in my console when starting up my Gatsby environment:
warn: The type `SanityImageAsset` does not explicitly define the field `childImageSharp`. On types with the `#dontInfer` directive, or with the `infer` extension set to `false`, automatically
Is there something a did incorrectly here or is there something I am missing as part of my setup? As a note, I have purged and reinstalled my node modules, public, and cache folders.
Just increase the value of maxwidth like this:
fluid(maxWidth: 300)
in your GraphQL query.
I was learning react through online sources, and I'm unable to find the solution for my problem-
suppose I have a json file -
"test":"This is a test file, contact at {{email}}"
and currently i use it as -
const [t] = useTranslation();
<div>t('test',{{email}})<div>
suppose I want to change the colour of the email text only, how do I do that?
I researched online, and read the Transcomponent documentation, but I'm unable to understand how to implement it.
You'll have to exclude the {{email}} placeholder from the translated text.
So this would be the i18n part:
{
"test": "This is a test file, contact at"
}
And this would be the React part:
const { t } = useTranslation();
return (
<div>
{t("test")} <span style={{color: "hotpink"}}>{email}</span>
</div>
);
There are a lot of variations for what you are trying to do (e.g. using external stylesheet, CSS classes, and so on), but this would be a straight-forward approach.
You can handle that using a css file, for that you need to import it to your react component file:
import './styles.css';
For this to work you should create a style.css file on the same folder/directory of your react file, after that you should set a css rule:
style.css
a {
color: hotpink;
}
I am having trouble locating the location of my images with react redux.
I am creating a react movie card that looks like this:
http://react-movie-cards.drminnaar.me/
My state is in the redux store.
My file structure is this.
the state is located at MovieList-reducer.js and I mapped it at MovieCard.js file.
why is it having an error like this:
×
←→1 of 6 errors on the page
Error: Cannot find module '../images/Kingsglaive_Final_Fantasy_XV.jpg'
▶ 32 stack frames were collapsed.
and have this in the terminal:
./src/Movies/MovieCard.js
Critical dependency: the request of a dependency is an expression
Please help me locate the file of the images.
you can find and clone my repo in https://github.com/bradrar/movie-cards and yarn start or npm start
I just need to locate the images and map it like so:
<img className="card-img-top" src={require(props.movie.imageUrl)} alt="" />
I know I am very close because I tried
<img className="card-img-top" src={require("../images/Ghost_In_The_Shell_2_0.jpg")} alt="" />
and it looks like this:
See my pull request here. Because webpack needs to know all your dependencies at build time, it's not possible to use require in a dynamic context. Use require.context() to build a context of all your images, and then reference them using that context.
First, change your references to use ./ instead (As because we're loading that folder into context, that essentially becomes the root ./):
{
"id": 100,
"title": "Kingsglaive",
...
"imageUrl": "./Kingsglaive_Final_Fantasy_XV.jpg"
},
And then in your movie card, create the context. (React will read through the folder at build time, and then give you the ability to access them using the context created):
const movieImages = require.context("../images/", true, /\.jpg$/);
const MovieCard = (props) => {
return (
...
<img className="card-img-top" src={movieImages(props.movie.imageUrl)} alt="" />
)
}
I want to upload multiples images then display them in browser. I wrote this code mentioned by this link.
I got the name of images displayed in place of images:
Image1.png
Image2.png
How can I fix that and if someone knows another npm module which upload and display images as a gallery I will be grateful if mentioned it to me.
Adding the property withPreview to the <ImageUploader /> gives you a preview of all "uploaded" images.
const UploadImage = props => {
const { onDrop } = props;
return (
<ImageUploader
withIcon
buttonText="Upload Image"
onChange={onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
withPreview
/>
);
};
You can see this change implemented here.
This library looks like it can achieve what you want right out the box. See the documentation for the library for more details.
I can't dynamically pass relative img src route in React + Webpack with this.props.
This is a very simplified part of the parent component. It iterates some data list and generates ImgComponents passing props. Here is only tiny part of it:
return (
<div>
<ImgComponent srcProp={videolist.anotherImage.src} />
</div>
);
The ImgComponent has:
render() {
return (
<div>
<img src={`${this.props.srcProp}`} />
</div>
);
}
In console I get exactly the same route as i pass with this.props.srcProp, but it would not find the folder and the img there. As if webpack does not load the img.
Here is the console:
<img src="framework/assets/images/cover-bigbuckbunny.png" class="_2WcF9ZmcK-9bQX6jKk18Y_" data-reactid=".0.1.1:$comedy.0.0.$0.0.0.0">
No matter what route i indicate, the img is never found in the folder.
Here is the webpack config for png:
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
BTW. It works fine if i require the file, like:
<img src={require ('framework/assets/images/cover-bigbuckbunny.png')} />
or indicate some remote route, like http://route.to.some.img
Seems like webpack does not load it. What should i do to dynamically load local img files by dynamically passing src with {this.props.src} ? As I can see, the loader loads img fine if i indicate the file with require. But this way i cannot do it dynamically, as require does not take variables.
What I managed to do is to require('../../assets/images/myFirst.img') in the object, containing the routs to the locally stored files:
in playlist.js
export default (
{
cartoons: [{
images: {
poster: require('../../assets/images/myFirst.png')
},
streams: [{
type: 'mp4',
url: 'http://media.w3.org/2010/05/bunny/movie.mp4'
}]
});
Then I work with this list as with any object:
import playlist from '../../playlist';
and iterate this object in a usual manner. The image will be there.
Webpack will not traverse your code to find and convert all possible references to files.
Consider following code:
<img src={'/foo/bar/baz.jpg'} />
It is your responsibility (perhaps using a build target) to ensure that baz.jpg is copied into the foo/bar directory under your web app root.