Created an app with create-react-app and tailwindcss. I am trying to display local images in my website. I created this folder structure in src: assets/media/images/profile.jpg. The image is not displayed in browser. Here's what I am doing.
Here's the component in src/components/Hero.js:
import ImageOne from '../assets/media/images/profile.jpg';
const Hero = () => {
return (
<div className="bg-white h-screen flex flex-col justify-center items-center">
<h1 className="lg:text-9xl md:text-7xl sm:text-5xl text-3xl font-black mb-14">
Text
</h1>
<img class="rounded" src={ImageOne} alt='Profile'/>
</div>
)
}
export default Hero
The image is simply not displayed. Here's what the browser is loading: <img class="rounded" src="/static/media/profile.ba8339ef.jpg" alt="Profile">
Other stackoberflow answers, like React won't load local images, did not help me.
double-check all instructions in the tailwind guide, make sure you replaced react-scripts start by craco start:
https://tailwindcss.com/docs/guides/create-react-app
in the meantime, have a look at this example repository:
https://github.com/oieduardorabelo/2021-03-18-tailwindcss-and-create-react-app
I created an assets/media/images/profile.jpg and src/components/Hero.js with the same snippet you shared here, and it is working correctly 🚀
Move your images folder from src/assets/media/ to public/ and add :
<img class="rounded" src={process.env.PUBLIC_URL + '/images/profile.jpg'} alt='Profile'/>
Related
I am using NEXTJS and framer motion but the local image is not appearing on the web page. Instead I get that little clip art thing.Below is my code to the particular component not working:
import React from 'react'
import {motion} from "framer-motion";
import aboutPic from './images/wed.jpg'
type Props = {}
function About({}: Props) {
return (
<div className=" flex flex-col relative h-screen text-center md:text-left md:flex-row max-
7xl px-10 justify-evenly mx-auto items-center">
<h3 className="absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl">
About
</h3>
<motion.img
initial={{
x:-200,
}}
transition={{
duration:1.2,
}}
whileInView={{x: 0}}
src={aboutPic}
/>
</div>
)
}
export default About
Most probably due to the location of your image.
According to your specified path, your image should be in the same folder as your 'About' component. Check your image location and path.
Note that in default image imports you can't use direct path for images stored in public folder as in urls.
Instead, you have to locate it like any exported component.
If you are in 'pages' folder and the 'images' folder is in 'public' for example:
import aboutPic from '../public/images/wed.jpg'
or
<img src='/images/wed.jpg'/>
I used lazy loading images using
import Image from 'next/image';
import rentalsImg from '../public/projects/LuxuryRentals.png';
const Projects = () => {
return (
<div id='projects' className='w-full pt-10'>
<div className='max-w-[1240px] mx-auto px-2 py-16'>
<p className='text-xl tracking-widest uppercase text-[#5651e5]'>Projects</p>
<h2 className='py-4'>What I've Developed</h2>
<div className='grid md:grid-cols-2 gap-8'>
<ProjectItem
title='Luxury Rentals'
technologies='HTML, Bootstrap, PHP, SQL'
backgroundImg={rentalsImg}
projectUrl='/rental'
/>
<ProjectItem
title='Vibe App'
technologies='Java, Android Studio'
backgroundImg={vibeImg}
projectUrl='/vibe'
/>
none of my images on my website, mobenl.com , are appearing. i exported my project using
npm run export.
when I check the network, for all pictures I get a status 200.
this is my first time doing a project with react and next js so I can't pinpoint what the issue could be, maybe the filepaths change when the files are converted into html files?
I am still in school so my knowledge isn't the best but it seems as though ive exhausted all my options.
I am a new programmer who is learning ReactJS through youtube videos(freeCodeCamp). I am 'faking' an https call by pulling data from a file. The file has a img path that I use to make multiple cards for a card section in my react code. My images are in a folder in 'src' called 'images.' My .jsx file that creates all my instances of card is called '.card.jsx.' This is my code for card.jsx. The images do end up in the 'dist' folder when I run 'npm run build' with Vite in VScode. I believe it is because of this line of code:
<img src={../src/images/${props.coverImg}}
import React from "react";
import "../css/index.css";
import star from "../images/star.png";
import katie from "../images/katie-zaferes.png";
import mountainBike from "../images/mountain-bike.png";
import weddingPic from "../images/wedding-photography.png";
function Card(props) {
let badgeText;
if (props.openSpots === 0) badgeText = "SOLD OUT";
else if (props.location === "Online") badgeText = "ONLINE";
return (
<figure className="card-container">
<div className="photo-container">
<img src={`../src/images/${props.coverImg}`} alt="picture" />
{badgeText && (
<p
style={{
background: badgeText === "ONLINE" ? "#F8EE7A" : "white",
fontWeight: "600",
}}
>
{badgeText}
</p>
)}
</div>
<figcaption>
<p className="ratings">
<img className="star" src={star} alt="" />
{props.stats.rating}
<span>
({props.stats.reviewCount}) • {props.location}
</span>
</p>
<p className="job-caption">{props.title}</p>
<p className="price">
<span>From ${props.price} /</span> person
</p>
</figcaption>
</figure>
);
}
export default Card;
What am I missing? Please leave a comment if I am leaving something out that you need to know about my code. Thank you for your help.
I tried the code above. I expected a folder to be created in 'dist' when I run 'npm run build' named 'images.'
I was wondering if it is somehow possible to use the icons from the react-icons package in PrimeReact, since the primeIcons package unfortunately does not contain all the icons I need for my project.
I haven't found a solution for this, because react-icons exports the icons as components and PrimeReact gets the icons assigned by string.
To change say search icon in a button
you can access https://react-icons.github.io/react-icons/search?q=fasearch
right click on the icon and inspect the elements, copy the SVG for the same from the developer console
create say search.svg file and paste the svg for fasearch in the file
add below class in say root.css file
.pi-search:before {
content: url(search.svg) !important;
}
This will change the search icon
This is a example
import { FaWheelchair, FaBolt, FaCarAlt, FaCar } from "react-icons/fa";
...
return(
<div className="flex card-container overflow-hidden ">
<div className="flex-none flex align-items-center justify-content-center p-1">
<TfiWheelchair />
<p className="text-lg">Wheelchair</p>
</div>
</div>);
In my project I need to link a img src dynamically.
This is the whole project structure:
I have tried multiple ways to link up my imag src in the follwing component, as you can see in the out commented part of my code.
The path itself cannot be the problem because the third try, which I cannot use cause its not dynamic, works very well.
What am I doin wrong?
import React from 'react';
import * as CommentStyles from './comment.module.scss';
// Only this works
import Image from '../../../../assets/image-anne.jpg';
function Comment({comment}) {
return (
<div>
<div className={CommentStyles.firstRow}>
{/* first try - didn`t work*/}
{/* <img src={require('../../../../assets/image-anne.jpg')} /> */}
{/* second try - didn`t work*/}
{/* <img src={'../../../../assets/image-anne.jpg'}/> */}
{/* third try - didn`t work*/}
<img src='../../../../assets/image-anne.jpg'/>
{/* fourth try-works: */}
{/* <img src={Image}/> */}
<div className="firstFlexItem">
<div className="name Username">
{comment.user.name} <br/>
{comment.user.username}
</div>
</div>
<p>
Reply
</p>
</div>
</div>
)
}
export default Comment
I have now put the jpg in the public folder and it doesn`t work:
I'm assuming you have created your reactjs project using the create-react-app command.
Since you want to dynamically set the image src attribute, the workaround would be to add the image or images inside the public folder as advised here in the official documentation : https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder
Then just use
<img src={`image-anne.jpg`} />
Where src has the path to your image relative to the public folder. This can also be dynamically set and will work just fine
NOTE : If this doesn't work, use
<img src={process.env.PUBLIC_URL + '/image-anne.jpg'} />
And make sure you kill the current session and restart your app using npm start or yarn start if you still can't see the image.
Screenshot from above link :