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
Related
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
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
I use Next.JS to build a small landing page including videos and images. Since the assets are static I assumed the practice here is to create a static folder and the call the videos/images from there.
Somehow Next is not able to find my assets though - how so? When I use them within the public directory, it works fine - but I guess this is a bad practice?
<img height={320} src="/static/images/hero/tag.svg" alt="" className="float-right" />
<video src="/static/video/hero.mp4" playsInline loop muted autoPlay poster="/static/video/hero-poster.jpg" />
In nextjs static file serving works only from public folder.
You add an image to public/my-image.svg, the following code will access the image
return <img src="/my-image.svg" alt="my image" />
Couple of notes must be taken care:
Note: Don't name the public directory anything else. The name cannot be changed and is the only directory used to serve static assets.
Note: Be sure to not have a static file with the same name as a file in the pages/ directory, as this will result in an error.
Both options has valid use cases
Assets - files are bundled directly into compiled chunks. That mean no extra request to load it in runtime and assets are instantly available. Definitely way to go with icons and other "inline" content. (You need to have appropriate webpack loader each file type. Images are supported out of the box but other file types may need manual config)
https://nuxtjs.org/docs/2.x/directory-structure/assets
Static - oridinary static files served directly by webserver. useful for big files, downloads, rarely accessed files etc.
https://nuxtjs.org/docs/2.x/directory-structure/static
In your case I would recommend images to be asset. Video can be static.
I have an Ember-cli 1.13 app that has a lot of images stored in the public directory. Now, it will correctly load all images except those in a particular component.
The component is called like this:
{{list-item url="list-url" name="List Name" price="240"}}
Internally, the component is this:
<a href="http://example.com/{{url}}">
<img src="/{{url}}.png" alt='Picture of the {{name}}' />
<p class="item-name">{{name}}</p>
...
</a>
When I build the application and launch to heroku the broken path is
https://ridiculous-name-123123.herokuapp.com/list-item.png
Which is the same as the localhost path except with a different domain obviously.
All of the other images work when not used with components.
Where am I going wrong?
When you build with a production env your assets undergo something called fingerprinting.
What appears to be the problem here is that your "built" url links to the un-fingerprinted file, one solution would be to move these images into a folder and exclude them from being fingerprinted, in your ember-cli-build.js:
var app = new EmberApp({
fingerprint: {
exclude: ['myComponentImages/']
}
});
A better solution would be to have the full url or pass a class that changes the image displayed since it looks like these are static assets and not user uploaded content.
I have several images in css files and js files and we ASP.Net MVC.
After deploying in the server images are getting loaded from the path
http://example.com/Images/image.png, whereas the actual is in http://example.com/mysite/Images/image.png
I have tried several paths
like
/Images/image.png
../Images/image.png
Images/image.png
../../Images/image.png.
However browser always tries to load it from the Images folder directly under the domain which does not exist.
Let say that you have following structure
MySite
MySite\Content\CSS\styles.css
MySite\Content\Images\img1.png
In styles.css
.myheader{
background-image:url('../Images/img1.png');
}
OR
In layout.cshtml or index.cshtml
<div style="background-image:url('#Url.Content("~/Content/Images/img1.png")');"></div>
OR
<img src='#Url.Content("~/Content/Images/img1.png")' />
one thing you have to make sure that it path is case-sensitive
I am using these tricks in my projects.
I hope it will help you.