英文:
How could I display images in a vue component throught laravel?
问题
You can pass the image link to the Vue component by modifying it to use the correct URL. You can prepend the base URL to the image link to make it accessible. Here's the modified code:
// Assuming you have the base URL defined in your Vue component
// You can use the Laravel asset function to generate the base URL
// In your Vue component
props: {
product: {
type: Object,
required: true
}
},
data() {
return {
imageUrl: this.generateImageUrl(this.product.image)
}
},
methods: {
generateImageUrl(imagePath) {
// Use Laravel's asset function to generate the full URL
return asset('storage/' + imagePath);
}
}
With this code, you can pass the product.image from Laravel to your Vue component, and within the component, it will generate the correct URL for displaying the image.
英文:
So I save an image with Laravel and want to display it on another page with vue.
I'm passing the entire object as a prop to vue, so it can access its name.
The problem is, when I do
$img = $request->file('image')->store('public/product_images');
sure, the image is saved into storage/app/public/product_images, but it's stored as public/product_images/UZ9bLK65CwOWDoB002rt61y1PyldZ4iEWpKh5HHl.jpg in the database, and is accessible through http://localhost:8000/storage/product_images/UZ9bLK65CwOWDoB002rt61y1PyldZ4iEWpKh5HHl.jpg.
So basically the vue component gets public/product_images/UZ9bLK65CwOWDoB002rt61y1PyldZ4iEWpKh5HHl.jpg as the image (as product.image), this way it's not accessible.
How am I supposed to pass the image link to the vue component and display it then?
答案1
得分: 0
明白了大约30分钟前我弄错了。
应该是
$img = $request->file('image')->store('product_images', 'public');
这样就可以了。
英文:
Realised about 30 minutes ago that I messed it up.
Instead of
$img = $request->file('image')->store('public/product_images');
I should've used
$img = $request->file('image')->store('product_images', 'public);
This way it works.
答案2
得分: -1
通过访问器或手动在通过控制器访问时附加完整路径，您可以获取文件的完整路径。
以下代码将返回整个路径：
Storage::url($filePath);
$filePath 是存储文件时获取的路径。
因此，您的代码将是：
$storagePath = $request->file('image')->store('public/product_images');
$filePath = Storage::url($storagePath);
英文:
You can get the full path of the file via an accessor or manually appending the fullpath when accessing through controller.
The following code will return the entire path:
Storage::url($filePath);
$filePath is the path you're getting back when storing the file.
So, your code will be:
$storagePath = $request->file('image')->store('public/product_images');
$filePath = Storage::url($storagePath);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论