I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.
I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.
If anyone knows what I'm doing wrong, I'd be really happy to know.
//tailwind.config.cjs
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Link to the hosted site
Link to the Github repo
The relative path being used is wrong.
./ with this you mean one heirarchy up.
But according to your question ./public/images/bg-mobile.svg
So try replacing ./ with / it should work.
Final code:
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
Related
I am using tailwind css and have added some custom animations in tailwind.config.cjs file. I have used this animation in Login component.Once user logs in he will be redirected to the home page it means login component unmounts, once it unmounts do I need to remove the animation applied to the login component manually using useEffect or it will be removed automatically. I have read that you should remove animations manually, but I am not sure. one more question When component unmounts it removes all the CSS applied to it right?
I would really appreciate it if someone could explain this to me in brief.
This is how my tailwind.config.cjs file looks-
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
keyframes: {
changeBgDark: {
"0%, 100%": { "background-image": "linear-gradient(to left, #4c1d95,#0284c7,blue)",
"background-size":"200%",
"background-position":"right"
},
"50%": { "background-image": "linear-gradient(to right,blue,#0284c7,#4c1d95)",
"background-size":"200%",
"background-position":"left"},
},
changeBgLight: {
"0%, 100%": { "background-image": "linear-gradient(to left, #6d28d9,#0d9488,#06b6d4)",
"background-size":"200%",
"background-position":"right"
},
"50%": { "background-image": "linear-gradient(to right,#06b6d4,#0d9488,#6d28d9)",
"background-size":"200%",
"background-position":"left"},
}
},
animation: {
changeBgLight: "changeBgLight 5s ease-in-out infinite",
changeBgDark: "changeBgDark 5s ease-in-out infinite"
},
},
},
plugins: [],
};
React doesn't provide this type of function or anything . It would help if you did that manually way.
I want to replace the navigation drawer with an image I have (./src/assets/image.jpg)
<v-navigation-drawer
mini-variant
dark
app
permanent
class="withBackground"
>
...
<style scoped>
.withBackground {
background: rgba(-1, 0, 0, 0);
background-image: // what here?;
}
</style>
I have no idea what to set to background-image. Should I load the image via import and attach it to a data field and then place it there?
You should use the src attribute.
You could do:
<v-navigation-drawer
mini-variant
dark
app
permanent
src="./src/assets/image.jpg"
>
Or if the image source is a variable something like this:
<template>
<v-navigation-drawer
mini-variant
dark
app
permanent
:src="imageSrc"
/>
</template>
<script>
export default {
data() {
return {
imageSrc: null
};
},
mounted() {
this.imageSrc = require('./src/assets/image.jpg')
},
};
</script>
For more info:
https://next.vuetifyjs.com/en/components/navigation-drawers/#navigation-drawer
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
I want to hide this code when users view with right click "Page source". How can I do it?
example 720pizle.com/izle/altyazi/american-sniper.html there is no embed code or video link in source code
You can't totally hide it, but you could use a tool to make it slightly more difficult to read for someone who isn't that technical. However, anyone with basic technical knowledge will be able to figure out the actual embed code using a developer tool (such as the Chrome dev tools, Firebug, etc).
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
That will make the code harder to read.
It isn't 100% secure though.
For instance, your code:
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
Would turn into:
<script>
<!--
document.write(unescape("%3Cdiv%20id%3D%22film%22%3E...%3C/div%3E%0A%3Cscript%3E%0Ajwplayer%28%22film%22%29.setup%28%7B%0A%20%20%20%20width%3A640%2C%0A%20%20%20%20height%3A360%2C%0A%20%20%20%20playlist%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20file%3A%20%22https%3A//videolink.mp4%22%2C%0A%20%20%20%20%20%20%20%20image%3A%20%22https%3A//videopic.jpg%22%2C%0A%20%20%20%20%20%20%20%20tracks%3A%20%5B%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22http%3A//video.srt%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%22English%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3A%20%22captions%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20true%20%0A%20%20%20%20%20%20%20%20%7D%5D%0A%7D%5D%2C%0A%20captions%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%27%23FFFFFF%27%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2010%2C%0A%20%20%20%20%20%20%20%20backgroundOpacity%3A%2050%0A%20%20%20%20%7D%0A%7D%29%3B%3C/script%3E"));
//-->
</script>
But someone could un encrypt it using a tool, or just use Firebug, etc, to see the actual output.
Yes It is possible. create session variable in php and try to run video code
One of my websites went online a few weeks back. The design included an embed tweet within a div which displayed properly at that time.
However while checking today, I noticed the embed tweet has moved to the right in Mozilla. Now what's puzzling me is that I didn't even touch the code, so has twitter or Mozilla updated one of their properties???
heres a link to my site.
OK the problem is solved finally managed overwriting the css created by twitter.
I simply used the following scc selector
"div_containing_twitter_script" iframe {properties}
So if I placed the code in a div with "twitter" as an id the code would be
#twitter iframe {property:value}
Nevertheless thanks a lot for trying to help me out...
If Twitter feeds are not showing you can use this following code.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <p></p> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 1000,
width: 180,
height: 200,
theme: {
shell: {
background: '#88d4ff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#00aeef'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().setUser('#YourUser').start(); /* Need to change User ID*/
</script>
What I'm trying to achieve is simple.
Now there's an extension already made called Note Anywhere. Notice when you click the app's icon the sticky note displays on the webpage, and you're able to drag, and drop that div anywhere you want.
What I'm trying to achieve is very similar.
Click #1 fades div in
Click #2 fades div out
I'll worry about drag and drop once I can get the div to actually show. I've spent over 16 hours trying to achieve this effect, and after getting extremely agitated I had to edit my question, and ask once more with updated info. So this will no longer be a problem again.
Here's my code.
Manifest:
{
"name": "CamDesk",
"version": "0.0.1",
"description": "The Desktop Webcam Widget",
"permissions": ["tabs", "http://*/*", "https://*/*"],
"background_page": "background.html",
"browser_action": {
"default_icon": "images/logo.png",
"default_title": "CamDesk"
},
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"css": ["css/style.css"],
"js": ["js/jquery.js", "js/jquery-swfobject.js", "js/background.js"]
} ],
"icons": {
"48": "images/48x48.png",
"256": "images/logo.png"
}
}
CSS:
.camdesk {
display:none;
width:320px;
height:240px;
background-color:#FFF;
box-shadow:0px 4px 16px rgba(0, 0, 0, 0.8);
overflow:hidden;}
Background Page:
<html>
<head>
<script src="js/background.js"></script>
</head>
<div id="camdesk">
Please install the most recent version of flash to use CamDesk.
</div>
</html>
Content Script: "To Show & Hide DIV"
$(document).ready(function() {
$('.camdesk').flash({
swf: './camdesk.swf',
width: 320,
height: 240
});
});
chrome.browserAction.onClicked.addListener(getMessage);
getMessage();
function getMessage() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(null, function(tab) {
$('.camdesk').fadeOut(350);
}); //getting response from content script
});
}
chrome.extension.onRequest.addListener(
function(sendResponse) {
if $('.camdesk').fadeIn(350);
$('.camdesk').fadeOut(350);
else
sendResponse({});
});
To create that effect, you need to use Content Scripts. That is the only way you can manipulate the DOM for a website your visiting. Since your coming from the extension context (Browser Action button), you need to use Message Passing to transfer commands to show/hide to the DOM.
So the steps to achieve what you need:
Instantiate a chrome.browserAction.onClicked.addListener in the Background Page
Use chrome.tabs.sendRequest to tell the DOM what to do. You need to send a message asking it to Show or Hide the overlay you wanted.
Listen on extension requests from the Content Script using chrome.extension.onRequest.addListener When you receive a Show or Hide command from the extension, you can add/remove the DOM.
Hope that gives you a slight push!