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'/>
Related
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 have successfully translated many of the pages on my website project but now I have moved to translate specific components that were created and it is not working.
The error message I get is as follows: "TypeError: Cannot read properties of undefined (reading 'titulo')"
**Note: I am using NextJS and TailwindCSS
This is the code for the JSON file strings where it should grab the translation, I have two files, one for ES (Spanish) and another EN (English)
"heroBanner":{
"titulo": "Ayudamos a PYMES a Captar la Atención mediante Publicidad Digital",
"subtitulo": "BIENVENIDO A COTTONMEDIA"
},
This is the component code where I have passed the props:
import React from 'react'
import Custom__Cursor from './Custom__Cursor'
function Hero__Banner(props) {
return (
<div>
<div className="relative h-screen">
<div className="h-full w-full">
<video autoPlay muted loop className="object-cover h-screen w-full ">
<source src="/AdsBgVideo.mp4" type="video/mp4">
</source>
</video>
</div>
<div className="absolute top-0 h-full w-full bg-black opacity-60 z-10"></div>
<div className="absolute top-1/4 z-20 max-w-screen-md md:max-w-screen-xl">
<div className='flex flex-col px-10 space-y-5'>
<p className='text-left text-sm md:text-base font-medium tracking-wide filter drop-shadow-md'>{props.titulo}</p>
<p className='text-left text-4xl md:text-5xl leading-normal md:leading-relaxed filter drop-shadow-md'>{props.subtitulo}</p>
</div>
</div>
</div>
</div>
)
}
export default Hero__Banner
Then where the component is rendered I have included these props with the string in order to get the translation as follows:
import Head from 'next/head'
import Image from 'next/image'
import Hero__Banner from '../components/Hero__Banner'
import ScrollToTop from '../components/ScrollToTop'
export default function Home(props) {
const { index, heroBanner } = props;
return (
<div>
<Head>
<title></title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/short-logo.svg" />
</Head>
{/*Main content */}
{/* Hero section */}
<Hero__Banner
titulo={heroBanner.titulo}
subtitulo={heroBanner.subtitulo}
/>
</div>
)
}
export async function getStaticProps({locale}) {
const response = await import(`../lang/${locale}.json`);
return {
props: {
index: response.default.index,
heroBanner: response.default.heroBanner
},
};
}
Even after doing that, I still get the same error, not sure why this is happening. The component translations are now on the index page which is in "pages", so it should work in my opinion. As you can see in the code, I already have some translated sections in the index, which work perfectly.
Error image
Any suggestions?
When you are translating with i18n, and get this error, it could be because you have altered the translation JSON file and the server needs to be restarted. That was the case for me, hope this helps.
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>);
I am currently working on a component's responsive styling wherein on large screens I have the div with the text element sitting on top of the div containing the img element and on smaller and medium screens have the div with the image aligned right below the div with the text element. I am using Next.js and and Tailwind CSS for styling.
The styling works fine on large screens but for some reason the div with the text element is not showing in small screens when I already have flex flex-col-reverse in the parent element
Here is how the entire code look like:
import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'
const LargeCard = () => {
return (
<article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
<div>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
<div className='h-96 lg:absolute lg:top-32 lg:left-12' >
<h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
<p className='text-lg lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
<button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
</div>
</article>
)
}
export default LargeCard
tailwind.config.js:
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
maxWidth: {
md: '90vw'
}
},
variants: {
extend: {},
},
plugins: [
require('tailwind-scrollbar-hide')
],
}
forgot to post the answer. I actually solved the following day.
First. flex-col-reverse is actually working.
Second. setting nextjs's <Image> component's objectFit property to cover will set the img element to cover the entire area of it's grandparent element so to contain it you add position relative to the parent div containing it and make sure to define it's height too.
something like this:
<div className='relative h-96'>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
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'/>