Develop Reference

dynamic src in vue with laravel 9

I'm using laravel 9 (with vite) and vue 2.7 and I need to use dynamic
:src
but when I use this
<img :src="`../../assets/${path}`" >
the url loads perfectly in the DOM but the image doesn't show on the page.
also when i get error message that says require is not defined when I use this:
<img :src="require(`../../assets/${path}`)" >
node v16.14.0

Firstly, I would suggest to check if in your template string the "path" contains the extension of the given image (.png, .gif, .jpg).
Secondly, you should try to place your images inside the public folder in the Laravel Application, since by default, the Vue components will look for the specific resource (in your case images) at that place.
For example if you have something like the code bellow, the Vue component will look for the certain image inside public/images subfolder inside Laravel.
/public/images
<img :src="`/images/${path}.png`" />
In your case, the whole path is wrong since it goes outside the Laravel folder/application. You are saying: Go outside public folder, go one more time outside, and than look for the assets folder.
At end /images in the :src means public/images

How to make a subpage unavailable for navigating...?

I've got the following structure:
pages/blog/[...slug].jsx
pages/blog/Create.jsx
The main problem is, I've got no idea how to make the "create" file unavailable for a browser navigation.
I need to open this "Create" page (Component) in my slug file. I know, I can create another directory and add files like that over there, but I don't find a such type of approach convenient.
Can I do something like this in the nextjs context?

Make a seperate folder other than pages ,like example components folder
-pages
->blog
->[slug].jsx
-components
->Create.jsx
Now u can import Create.jsx in your [slug].jsx file.

Load static assets with vue-cli 3.x

I have a vue-cli 3 project setup with the following directory structure:
All static assets are loaded in the public directory and are compiled and built successfully on localhost.
As seen in the image below, guyana-live-logo.png, slide-1.jpg and 970x250-ad.png are all loaded successfully, however, only the logo and the ad image appears in the browser.
What I've tried
Changing the way the image is referenced.
Original - which works for almost all other images
<img src="/img/slide-1.jpg"/>
Test 0 - this loaded the image with a hash appended (slide-1.1b0ahsa.jpg) but it still did not appear in the browser
<img src="../../../public/img/slides/slide-1.jpg">
Test 1 - using v-bind
<img :src="'/img/slide-1.jpg'"/>
Moving the image inside the src directory and the component sub-directory both of which proved futile.
Updating vue-loader
Building for production and serving only the /dist folder
Key notes
The console or my bug tracking software produces no error.
Image format doesn't seem to be the problem, some .png loads while others don't, the same is true for .jpg.
Some JavaScript files are affected. JS files are being called like this: <script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> in public/index.html

The images will need to be in the same directory or a child directory of the file in which you're trying to access them (i.e. in the Components directory).
Can you also try to access the image via its URL <img src="http://localhost:8080/img/guyana-live-logo.png" />?
This should work, but you may not want to use it this way.
Another possibility you might be able to use is doing this:
<script>
import image from './img/slide-1.jpg'
...
Then in Vue data:
data() {
return {
img: image,
};
},
Then in your HTML:
<img :src="image"/>
This solves issues when trying to access images when building with Parcel Bundler

How to avoid using "../" when webpage is located in subdirectory?

I am working on a static website as a web design project for college. It's a tech blog that contain mock articles. I'm storing the website in the root (these are pages like index.htm, news.html, reviews.html, etc). However, I want to avoid clutter for actual article pages. So I store these pages in a subdirectory called articles, example: "articles/article1.html".
Now I have to write two javascript files because of this. My two javascript files would do exactly the same thing except javascript file A is for all pages in the root and javascript file B is for all pages in the articles subdirectory. And that's because my javascript code accesses files in my website. That means I have to prepend "../" to all urls in js file B for my js to work. File A would not have "../" appended.
What can I do to only use 1 javascript file for my static website?

You can prepend the URLs with /. This always take you to the root, so regardless of where the file is, you start the path with the root folder.
Like
img.src = "/Images/img1.jpg";
NOTE
This will not work if your site is running in a subfolder

Refer to Root of Web Site in JScript

To refer to the root of a website in asp I use an ASP control (normal hyperlinks don't work!) and use the tide ~
However I am trying to achive the same with Jscript and it does not work.
I have set up a folder structure to better organise the files on my website. I have placed a Jscript file within the root of the folder structure and refer to it like this
"/superslight.js" this is in the master page
The user navigates to a page that is one folder down the link breaks down becuase it's not looking at the root of the site but the root of the current folder
Any ideas?

<script src="<%=ResolveClientUrl("~/superslight.js")%>"></script>

use two dots to refer to the parent folder :
assuming that you have the following folders structure
root---->pages---->myFile.aspx
root---->scripts---->myScript.js
you refer to myScript.js in myFile.aspx like this:
<script type="text/javascript" src="../scripts/myScript.js" />