This is a laravel vue project. My Image directory "public/images/products". My Database image data is "image":"images/products/image_name.jpg". My Route path is "127.0.0.1:8000/product". In this route path image showing without a problem. when my route 127.0.0.1:8000/product/:slug, here my image not showing. Here I inspect element the browser and I see the image path looks like 127.0.0.1:8000/product/:slug/images/products/image_name.jpg. Now How I Fix The Image Link.
My Router.Js
{ path: '/product/:slug', component: require('./components/public/singleProduct.vue').default },
My Vue File
<li v-for="data in product.product_images">
<img :src="data.image" class="img-fluid"/>
</li>
You can use absolute path, works anywhere (I mean, no matter what current path is).
<img :src="'/' + data.image" class="img-fluid"/>
I like to display images in a content in vue. The content ist stored in the db.
I use vue-auth-image
If i put the code <img v-auth-image="api/media/1"> in to the template section, it works well.
But whit the following code, it doesn't work:
<div v-html="issue.body" >
</div>
The response from the ajax call is "body": "<img src='api/media/17'>",
How can i display the image in the content?
What am I doing?
I am using the intersection observer API to make lazy loading.
What have I tried?
I tried the code in a simple HTML page and it works perfect, but when I use the code in vue, the images won't load (local images). If I put a htttp source images (online images) it works perfect, too. I think this is a webpack error config. Am I right? How can I fix it?.
Whats the error?
When i use a local image the code doesnt work, if only change that src with something else like this image https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 the code WORKS, why i cant make it work with local images?
HTML AND SCRIPT
<template>
<div class="container" id="section3">
<span class="containerTitle">Galeria</span>
<div class="wrapper">
<img v-lazyload data-src="#assets/images/001.jpg" class="card">
</div>
</div>
</template>
<script>
import lazyload from '../directives/lazyload'
export default {
directives:{
lazyload
},
}
</script>
DIRECTIVE
export default{
inserted: el =>{
const options = {
// root:
rootMargin: '0px 0px 0px 0px',
threshold:1
}
var observer = new IntersectionObserver((entries,observer) =>{
entries.forEach(entry => {
if(entry.isIntersecting){
el.src = el.dataset.src
observer.unobserve(el)
console.log('intersecting');
}
})
},options)
observer.observe(el)
}
}
CODE IMAGE
FOLDER
The issue is with your image path.
You can fix it with either using public folder and give it in path.
You can also check for auto suggestion which come up while typing, this may help you to check whether your path is correct or not.
Like this
Your path is wrong. You gave ../assets/images/001.jpg as the path to the image (as stated in your question), but according to your directory tree it's ../assets/001.jpg (or write it like #/assets/001.jpg, # points to root of project). That should fix it.
As far as I remember you can't use # sign inside <template>.
So you can either:
require it
<img v-lazyload :data-src="require('#assets/images/001.jpg')" class="card">
import it
<template>
...
<img v-lazyload data-src="image" class="card">
...
</template>
<script>
import img from '#assets/images/001.jpg';
...
data() {
return {
image: img,
}
}
...
</script>
use relative path
<img v-lazyload data-src="../assets/images/001.jpg" class="card">
You can check how it works in Vue docs
I can't remember why this works, but you need to use the following syntax:
<img v-lazyload data-src="~assets/images/001.jpg" class="card">
with the ~ replacing the ../.
I will update the answer if I figure out exactly why.
doing extensive research i found this article about vuejs and static assets.
https://edicasoft.com/weblog/2018/04/27/static-vs-srcassets-webpack-template-vue-cli/
They said that this kind of problems occurs "because" of webpack,like i though, so the solution for this (i hope not the only solution), but this is the solution so far...
QUOTE
All asset URLs such as , background: url(...) and CSS #import are resolved by Webpack as module dependencies like require('./logo.png').
We then use loaders for Webpack, such as file-loader and url-loader, to process them. Webpack template has already configured these loaders.
File-loader helps to determine the final file location and how to name it using version hashes for better caching. Thus you can put your static assets near your .vue files and use relative paths. There is no need to put them strictly into the ‘assets’ folder.
Url-loader helps to conditionally inline assets such as base64 data URL, reducing the amount of HTTP requests.
So what the hell should I do with it?
The answer is: put your assets in the ‘src’ folder.
I tested this and it works perfect BUT you CANT make a subfolder and this for me, is disorganized.
This is the final folder structure to get this done using intersection observer api as vue directive!
I am building a web app using vue. I am trying to load images of a strapi cms that I am running and include them via an v-for loop in my component.
When setting the :src for an image, vue always includes the local server that my vue app is running on at the beginning. How do I get around that, so that I can reach the CMS on another port?
I tried different methods of binding the source, including "v-bind:src", ":src", ":src="require()""
<div class="images">
<template v-for="(Image, index) in Images">
<p v-bind:key="index">{{Image.Image_URL}}</p>
<img v-bind:key="index" :src="Image.Image_URL" :v-bind:alt="Image.Titel">
</template>
</div>
Output of one of the json objects.
Date: "24.04.2019",
Place: "Beijing, China",
Id: 2,
Image_URL: "http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg",
Title: "Lights"
I get the image url in a json object. The final url, which is represented here as "Image.Image_URL" is something like: "localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg". Until now the image src is always get "http://localhost:8080/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg" in Vue.
Thanks guys
You are missing one more slash in http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg, should be http://
I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example