Store and display data from mysql using laravel and vue js - mysql

Question

So I have 2 project files, 1 for the homepage where users can submit data such as text and images, and the other one is for the admin pages, to read the submitted data from users, both project uses the same database.
The datas have been successfully stored and displayed in both projects, the problem is for the images, It's only showing the image path, not the image itself like this
enter image description here
I tried to copy the image from the homepage to the adminpage but still it's just showing the image path only.
What could be the problem ? because In the homepage, If the user submit an image, The image will be uploaded to images/imgupload folder, and the data that will be sent to the database is like this :
images/imgupload/4cad6hMcc36c1dtGw6K1OUkRnAFCucEpDP44vN9B.jpg
Is it the right way to store image to a database? because then in the admin page, It will be only showing the path, not the image itself.
This is the methods in the homepage
methods: {
async submitForm() {
const formData = new FormData();
formData.append('text', this.form.text);
formData.append('file', this.form.file);
try {
const response = await axios.post('/api/endpoint', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
console.log(response.data);
} catch (error) {
console.error(error);
}
},
uploadFile() {
this.form.file = this.$refs.fileInput.files[0];
},
},
The controller
public function store(Request $request)
{
$request->validate([
'text' => 'required',
'file' => 'required|file',
]);
$formData = new FormData();
$formData->text = $request->text;
$formData->file = $request->file('file')->store('formdatas');
$formData->save();
return response()->json(['success' => 'Form data was saved successfully.']);
}
The routes :
Route::post('/endpoint', function (Request $request) {
$text = $request->input('text');
$file = $request->file('file');
$data = new FormData();
$data->text = $text;
$data->file = $file->store('images/imgupload');
$data->save();
return response()->json(['message' => 'Success']);
});