In React, is it possible to preload an image that is imported via JS import?
I would like a way to combine the following from my js file
import image from './image.svg';
and the following from my index.html file
<link
rel="preload"
as="image"
href="???/image.svg"
/>
I don't know how about create-react-app but if you use your own webpack setup you can try something like:
plugins: [
new HtmlWebpackPlugin({
...
}),
new HtmlWebpackInjectPreload({
files: [
{
match: /(filename)+.+(\.webp|\.png)$/,
attributes: { as: 'image' },
}
],
}),
]
If you are using HtmlWebpackPlugin, you can try the HtmlWebpackInjectPreload plugin, which is the extension of the first one. It will look for outputted asset names and inject links into the head section based on those findings.
https://github.com/principalstudio/html-webpack-inject-preload
You can use your imported image like this
<img src={image}/>
Since you import your image it will be loaded with the document.
Related
So I was working on Login page using next.js as framework.
I did some simple designs using react for some texts but it is not showing on browser. It may be that it is not imported.
I don't see any error on console so I'm having trouble with finding what the problem is.
I can check on the inspector the classnames for these texts so I'm really puzzled why this is not reflected on the browser.
Does anyone know what the problem is or have had the same experience?
Thank you in advance.
the files looks like this:
It is my belief that the problem lies with your Tailwind installation. Kindly verify that Tailwind is installed correctly. On occasion, issues such as this can arise due to an issue with the Tailwind configuration file (tailwind.config.js). If the content routes are not added correctly, it may work in some components but not others.
content: [
"./components/**/*.{js,ts,jsx,tsx}",
"./widgets/**/*.{js,ts,jsx,tsx}",
"./shared/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./hook/**/*.{js,ts,jsx,tsx}",
],
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass.
I am a bit confused and I followed the documentation of Gatsby.
Nothing worked so my last chance is SO.
// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static/`,
},
},
]
Here I import the style.
/**
* Add browser relation logic.
*/
require('./style/global.js');
import './style/sass/index.scss';
I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.
Best Regards
Knome
I didn't integrate in any component. Because if I see the Source code
of chrome then there should be scss be loaded.
Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.
Just do:
const IndexPage =()=>{
return <div className="grid-container">I'm your index page</div>
}
Like any other HTML element.
I am trying to display a locale SVG file but it keeps showing the alt attribute of the element.
The img tag does have data in the src
this is my import import appleMusic from '../public/Applemusic.svg'
next.config.js
module.exports =
withImages(
withTM(
withFonts(
{
enableSvg: true,
webpack(config, options) {
return config;
},
})
)
any idea why this is happening?
As mentioned in the comments, you can use the SVG's path directly in the img's source.
<img src="/Applemusic.svg" />
Files inside the public/ folder can be referenced by your code starting from the base URL (/).
I am using static react template and need to implement scss. my git hub sample : https://github.com/PrasanthGokuldas/Test_ReactStatic.git
i tried to add react-static-plugin-sass to package.json and included in static.config.js file as
plugins: ['react-static-plugin-sass']
but i am unable to access scss file to project.
Once you have added react-static-plugin-sass using yarn or npm, you need to add it to the top of your plugins array (static.config.js) as follows:
plugins: [
require.resolve('react-static-plugin-sass'),
[
require.resolve('react-static-plugin-source-filesystem'),
{
location: path.resolve('./src/pages'),
},
],
require.resolve('react-static-plugin-reach-router'),
require.resolve('react-static-plugin-sitemap'),
],
Then all you need to do is start writing your Sass in your app.scss file and import app.scss in your App.js.
<img src={BASENAME+"/src/images/cabecera_CE.jpg"} id="idImgCabecera" alt="Universidad Politécnica de Cartagena" class="img-responsive"/>
and I want next:
import PHOTO from './../images/cabecera_CE.jpg'
<img src={PHOTO}/>
OR
<img src={require("./../images/cabecera_CE.jpg")} />
But it is not working... Also happen in a index.html file. I have next:
<link rel="icon" type="image/ico" href="/upct/src/images/icono.ico"/>
and I want next:
<link rel="icon" type="image/ico" href={require("./src/images/icono.ico"/)}>
I have achieved that but my img is copied into my public folder with name 5465452465.jpg. I wanna try without saving them into public (as url-loader does). How could I solve this?. Do I need any special plugin for webpack to do this?
You must configure your url-loader, which uses file-loader internally.
In order not to get hashed file names just leave [path][name].[ext] parameters. Omit the [hash] template.
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader?limit=10000',
options: {
name: '[path][name].[ext]'
}
}
With this configuration images smaller than 10000 bytes will be inlined as Data URI. If you want to disable this behavior, then just use raw file-loader.
Your assets will land in the root by default, however, you can change the publicPath, for example, to '/images/' in your output configuration section:
output: {
...
path: buildPath,
publicPath: '/images/'
}
Relative paths suck most of the time, you can configure Webpack, so you can import modules relative to your src folder by using this:
resolve: {
modules: [
path.resolve(__dirname, 'src'),
'node_modules'
]
},
Then you can import modules:
import PHOTO from 'images/cabecera_CE.jpg'
<img src={PHOTO} />
Better, isn't it?