Develop Reference

Nuxt 3 Images not rendered when set the src dynamically on build process

:I have the following problem with a Nuxt3 application.
When set an image source via template strings the build process will not render the images.
Otherwise it will, when i set the image src normally. But i need it dynamically.
There are teasers with different images that need to be rendered.
Everythung is working fine, e.g. props ...
The working code:
...
<img
src="/assets/_DSC0238_E.jpg"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>
...
The not working code:
...
<img
:src="`props.image`"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>
...
What is the way to solve this issue?

In case you are using Nuxt 3 with Vite as Bundler
Set Assets composable.
export default function useAssets() {
const svgs = import.meta.globEager('/src/assets/*.svg');
const pngs = import.meta.globEager('/src/assets/*.png');
const jpegs = import.meta.globEager('/src/assets/*.jpeg');
return {
aboutImage: svgs['/src/assets/aboutImage.svg'].default,
search: svgs['/src/assets/search.svg'].default,
info: pngs['/src/assets/info.png'].default,
};
}
Then in any file:
<template>
<div>
<img :src="assets.info">
</div>
</template>
<script lang="ts">
import { defineComponent } from '#vue/runtime-core';
import useAssets from '../composable/useAssets';
export default defineComponent({
setup() {
const assets = useAssets();
return {
assets,
};
},
});
</script>
resource
In case (Vu3, Vue2, Nuxt 2) and bundler is Webpack
You need to require the image path, and set a dynamic src attribute by adding a colon before :src
<img
:src="require(`~/assets/${props.image}`)"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>
In case (Vu3, Vue2, Nuxt 2) and bundler is Vite
const getImage = async imgName => {
// set the relative path to assets
const module = await import(/* #vite-ignore */ `../../assets/${imagName}`)
return module.default.replace(/^\/#fs/, '')
}
<img
:src="getImage(props.image)"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>

we can use v-bind to assign them a string value dynamically. read this
Try like this:
<img
v-bind:src="require(`#/assets/${props.image}`)"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>
or for shorthand syntax
<img
:src="require(`#/assets/${props.image}`)"
:alt="props.name"
class="w-full aspect-square object-cover"
:class="`aspect-${props.aspectRatio}`"
/>

How to fix Error: Element type is invalid: expected a string or a class/function but got: undefined?

I have the above error message and i am not sure about what cause this to happen.
On the below code snippet i am fetching some data from a file named Data.js located on my root folder.
When i run my the app i receive the mentioned error message but when use the same data without importing for an external file it works perfectly. which is not making much sense, Can someone tells me what i am doing wrong please? Thanks in advance.
Services.js
import { FaCircle, FaShoppingCart, FaLaptop, FaLock } from 'react-icons/fa'
import { serviceLinks } from '../../../Data'
const data = serviceLinks;
console.log(data);
// const serviceLinks = [
// {
// title:'Haircut',
// text:'All dependencies are kept current to keep things fresh.'
// },
// {
// title:'Barberos',
// text:'You can use this design as is, or you can make changes!'
// },
// {
// title:'Color',
// text:'Is it really open source if its not made with love?'
// },
// ]
const icons = [
FaShoppingCart, FaLaptop, FaLock
]
function Services () {
return (
<section className="page-section" id="services">
<div className="container">
<div className="text-center">
<h2 className="section-heading text-uppercase">Services</h2>
<h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div className="row text-center">
{ data.map((service,idx) => {
const Icon = icons[idx];
console.log(Icon)
return (
<div className="col-md-4" key={idx}>
<span className="fa-stack fa-4x">
<FaCircle className="svg-inline--fa fa-circle w-16 fa-stack-2x text-dark" height={100} width={100} />
<Icon className="svg-inline--fa fa-shopping-cart fa-w-18 fa-stack-1x fa-inverse" fill="white" />
</span>
<h4 className="my-3">{service.title}</h4>
<p className="text-muted">{service.text}</p>
</div>
)
})
}
</div>
</div>
</section>
)
}
export default Services;
data.js
const galleryLinks = [
{
title:'HairStyle',
haircutName:'Afro',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_afro.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_afro.jpg",
},
{
title:'Hairstyle',
haircutName:'Blondo',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_blondo.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_blondo.jpg",
},
{
title:'Hairstyle',
haircutName:'Chica',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_chica.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_chica.jpg",
},
{
title:'Hairstyle',
haircutName:'Nino',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_nino.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_nino.jpg",
},
{
title:'HairStyle',
haircutName:'Wavy',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_wavy.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_wavy.jpg",
},
{
title:'HairStyle',
haircutName:'Blondo2',
imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_blondo2.jpg",
imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_blondo2.jpg",
},
]
const serviceLinks = [
{
title:'study our themes',
text:'Our themes are updated regularly to keep them bug free!',
icons:"assets/img/logo/Hnet.com-image.svg",
},
{
title:'Haircut',
text:'All dependencies are kept current to keep things fresh.',
icons:"assets/img/logo/clipper.svg",
},
{
title:'Barberos',
text:'You can use this design as is, or you can make changes!',
icons:"assets/img/logo/barber_chair.svg",
},
{
title:'Color',
text:'Is it really open source if its not made with love?',
icons:"assets/img/logo/hairstyle.svg",
},
]
export { galleryLinks, serviceLinks};
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import Header from './src/components/Header'
import Services from './src/components/Services'
export default function Home() {
return (
<div className="container-fluid">
<Head>
<title>Dr Cut TheBarber Show</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="main">
<Header />
<Services />
</main>
<footer className="footer text-center">
<a
className="text-decoration-none text-dark"
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}

It has nothing to do with the way you are importing Data.js
Here is the source of the error:
const icons = [FaShoppingCart, FaLaptop, FaLock];
{data.map((service, idx) => {
const Icon = icons[idx];
You basically have an array of 3 icons but your serviceLinks array length is 4 in your Data.js so at some point in the map you are doing icons[3] which returns undefined and causes the error.
Add an icon to your icons array to match your last serviceLink.
Working CodeSandbox.

I don't see my picture but only the alt attribute

I don't understand why I cannot see my image, I mean I just see the alt attribute instead of the picture. Here is my code :
import React, {Component} from "react";
const Cards = (props) => {
return (
<>
<div id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
style={{maxWidth: 200, marginRight: 10}}>
<div className="card-header">Test</div>
<div className="card-body">
<img src="test.jpg" width="200px" height="200px" className="card-img-top" alt="test" />
<h4 className="card-title">Description</h4>
</div>
</div>
</>
)
}
export default Cards;
whereas when I try this modification it works :
import React, {Component} from "react";
import logo from './test.jpg';
const Cards = (props) => {
return (
<>
<div id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
style={{maxWidth: 200, marginRight: 10}}>
<div className="card-header">Test</div>
<div className="card-body">
<img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
<h4 className="card-title">Description</h4>
</div>
</div>
</>
)
}
I don't understand why this does not work. For me the path is good.
Could you help me please ?
Thank you a lot !

alt will be presented each time the image would not load properly.
So in your case, the latter example would work properly because logo is actually pointing to the jpg image, and the image could be displayed without the alt string.
The first example you shared would not work because src doesn't have an actual pat, it only has a string that isn't resolved into an image hence no image would be loaded and the browser will present the alt value.

on most occasions, images (static files) should be stored in your /public folder.
You can create a images folder in your public folder and then you set src="/images/test.jpg" instead of just "test.jpg"

You need to import
In some case if still not work
than check config file as I described
Note: need to install file-loader package
import React, {Component} from "react";
import logo from './test.jpg';
const Cards = (props) => {
return (
<>
<div id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
style={{maxWidth: 200, marginRight: 10}}>
<div className="card-header">Test</div>
<div className="card-body">
<img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
<h4 className="card-title">Description</h4>
</div>
</div>
</>
)
}
In Config file:: MAKE SURE FOLLOWING RULES DEFINED
module.exports = {
// other config
module: {
rules: [
// other rules
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader'
},
]
}
}```

Try like this:
<img src="./test.jpg" ...
It should work, if the picture is in the public folder.

The answer is : <img src={require('./test.png').default} />

That's because webpack is configured to bundle your images and assets by using the JSX syntax. Anything within {} can be seen as a property of a component. When it's inside the src attribute it becomes a property of the src and webpack than knows what to do. If you are simply adding the string it will view the source as a string rather than an image.
The path alone will only have meaning when you convert it from a meaningless string to an object. An alternative to your first approach could be
<img src={require('/text.jpg')} />
That should work too.

React Image Selector

so I am trying to use an if statement but don't know how to word it properly, or if I can with React in a jsx file. My goal is to select the image based on the first name attribute I chose and worked so here is the code for the App.js I am trying to keep it as simple and basic as possible so I can try to figure out a nice clean way to do it but I have no clue. Thanks :)
import './App.css';
import PersonalCard from './components/personal.jsx'
function App() {
return (
<div className="App">
<PersonalCard firstName="Lou" lastName="Ferrigno" age={68} hairColor="Black" />
<PersonalCard firstName="Arnold " lastName="Schwarzenegger " age={73} hairColor="Brown" />
{/* Franco died in 2019 at the age of 78 :'( */}
<PersonalCard firstName="Franco" lastName="Columbu " age={79} hairColor="Brown" />
<PersonalCard firstName="Frank " lastName="Zane " age={78} hairColor="Black" />
</div>
);
}
export default App;
now here is the code for the jsx file
import React from 'react';
const theW ={
width:'400px',
}
const PersonCard = props => {
const {lastName,firstName,age,hairColor} = props
return(
<div className="card" style={theW}>
<img className="card-img-top" src="" alt="Card image"></img>
<section className="card-body">
<h1 className="card-title">{ lastName }, { firstName }</h1>
<p className="card-text">Age: { age }</p>
<p className="card-text">Hair Color: { hairColor }</p>
See Profile
</section>
</div>
);
}
export default PersonCard;

you just need to add the src attribute of the image as dynamic.
so in your code
div className="card" style={theW}>
<img className="card-img-top" src={`location/${firstname}.jpg`} alt="Card image"></img>
here location is the path to the file
EDIT
webpack require additional files to be imported so
<img className="card-img-top" src=require({`location/${firstname}.jpg`}) alt="Card image" />

Thank you so much for trying # Sharun K K but even though it might have been something I was doing wrong that require way did not work for me.
What I did to fix this and shout out to this video on youtube Esterling Accime!,was instead I added an image folder in the public section and did this line of code
<img className="card-img-top" src={`/images/${firstName}.jpg`} />
so that worked wonders for me once again thank you so much for the help :). Another issue with this was I put a name in the App.js file I did this
// this is wrong because of the space in the firstName
<PersonalCard firstName="Lou " lastName="Ferrigno" age={68} hairColor="Black" />
// so no spaces like this
<PersonalCard firstName="Lou" lastName="Ferrigno" age={68} hairColor="Black" />
// and all my issues went away.

How do I write nested styles?

I am using react.js and i have simple rules for my webpack
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader', options: {modules: true}}
]
}
all i do, i process my css styles with help of style and css loaders, so i can write css in modules, everything works fine but i can't understand how to write nested styles, for example i have jsx code like this
import React from 'react';
import ReactDOM from 'react-dom';
import ButtonCSS from "./button.css";
import HeaderCSS from "./header.css";
import ArticleCSS from "./article.css";
const Button = ({title}) => {
return (
<div className={ButtonCSS.defaultButtonStyle}>
{title}
</div>
);
};
const Page = () => {
return (
<div>
<header className={HeaderCSS.defaultStyle}>
<Button title="Search" />
</header>
<article className={ArticleCSS.defaultStyle}>
<Button title="Registration" />
</article>
</div>
);
};
ReactDOM.render(
<Page />,
document.querySelector('.container')
);
here i want what my default project button would be red for search, and orange for registration, but styles for button and for header are in different .css files, and they are compiled to random hashes like this
<div class="container">
<div data-reactroot="">
<header class="_1drImxMAqFTeL1TQCthA-D">
<div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
</header>
<article>
<div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
</article>
</div>
</div>
so i can't just simply write something like
header .magic {
do something ...
}
if i'll start using :global in all my .css files, what will be the point of using modules at all?

You should use composition: https://github.com/css-modules/css-modules#composition.
This way, you will have both your classes extending a class containing all the common css.