dynamic src in vue with laravel 9 - javascript

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

Related

accessing static html css and javascript inside a react app

I have my react app directory structure like this.
I am using react-router to display some tabs in my app and in one of the tabs, I want to display static HTML /CSS and Javascript contents in one of my tab.
My src/main folder contains the following folders:
js folder with all react app-related JS components
resources/static folder with images folder and one random index.html file which is not used.
Approach 1:
I am wondering if I can put my static HTML /CSS and Javascript contents inside the resources/static folder or should I create a webapp folder and put it in there, and after putting it there, would I be able to access the contents inside my tab using Iframe?
Approach 2:
The other way which has worked for me is the following:
I put the static html,css and javascript in a folder(ProjectExternal) inside webapps folder of tomcat. And then access it like this from my react tab:
<Iframe
url="https://mycurrentserver/ProjectExternal/index.html"
width='100%'
//height='500%'
height='830px'
allowFullScreen
/>
If I can get it through Approach 1 then I won't have to go through the time-consuming process of Approach 2 of putting files and folders somewhere else and accessing it from there

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 do I add another page in an angular-cli project?

Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.

Holder.js in Google Appengine (python)

I want to load a placeholder image using holder.js in a static template. In static template index.html I have:
<img src="/static/holder.js/200x200">
I have handlers set in app.yaml for serving static files in a folder called static, so I know that's not a problem, but for some reason holder.js will not generate the 200x200 image I called for (the log files generate a 404 error). I bet this is some sort of handler issue; perhaps App Engine is treating my request as a directory and cannot find it. I need to configure the app.yaml file so that it treats requests to holder.js as a parameter for the file and not as a subdirectory of the file. Can someone point me in the right direction to help solve this problem?
When using Holder.js, the src attribute isn't meant to be used as a real URI. Instead, it's used as an identifier for Holder.js (specifically the domain option). Your code should look like this: <img src="holder.js/200x200"> or <img data-src="holder.js/200x200">. Make sure to include <script src="/static/holder.js"></script> in the document as well.

Categories

Resources