vue v-for 图片不显示。相反，它显示字符串

Question

我想在我的table中显示相应用户的图像。但是当我执行 v-for 时，它只在 table 中以字符串格式显示图像名称。我怎么能显示图像而不是文本本身？因为在 laravel blade 中我可以做一个 foreach 循环并直接显示图像。我应该怎么办？非常感谢

我的table

我的 axios 代码和 v-for

  <tr v-for="teacher in teachers" :key="teacher.id">
                            <td>{{teacher.id}}</td>
                            <td>{{teacher.image}}</td>
  </tr>


  methods:{
            getTeachers(){
                axios.get('getTeachers')
                    .then((res)=>{
                        this.teachers = res.data
                    })
                    .catch((e)=>{
                        console.log(e)
                    })
            }
        }

Answer 1

您正在尝试显示图片，因此，您应该使用：

<img v-bind:src="teacher.image" />

Answer 2

您需要将图像 url 包裹在适当的 HTML 标签内。

行中的内容：

<img :src="teacher.image">

执行此操作时，您将图像添加到 HTML 页面中，语法“:src”用于将 html 属性 'src' 与 vue 变量（在本例中为您的图片 link/name).

如果之后图像没有显示，您的 link 无效。查看图片url，看能不能直接从浏览器获取。如果服务器未在 url 处返回适当的图像，那么它将无法工作。使用 'alt' 属性设置文本而不是图像以查看是否发生这种情况。

Answer 3

问题在于您保存图片的方式。您在数据库中保存了唯一的图像名称，而不是路径。每当您通过 laravel 中的表单上传内容时。它将文件保存在 public/storage 中。

运行先命令

php artisan storage:link

这是您可以做的。提交表单时使用以下代码将图像保存在数据库中（我假设您正在系统中注册教师）

之后您的图像列将包含图像的总路径。

     if(!empty($request->file('image_file'))){
                $path = storage_path('public/teacher-images/');

                if(!File::isDirectory($path)){
                    File::makeDirectory($path, 0755, true, true);
                }
                $image_path = Storage::disk('public')->put('teacher-images', $request->file('image_file'));
                $teacher->image = isset($image_path) ?  "storage/".$image_path : "";
            }

之后，您可以通过附加 serverurl

使用该图片显示在您的模板上

Answer 4

您需要添加图片标签，然后提供图片的完整路径作为来源。例如：

<img :src="'/path/to/images/folder/'+teacher.image">

如果您正在使用 Laravel 的内置存储，我建议您应该 return 控制器中图像的完整路径，即使用 Storage::url() 获取完整的URL 图片。

Answer 5

您的服务器仅通过文件名找不到您的图片。所以我建议你从控制器传递你的图像 link 的完整路径。使用 asset() / Storage::url() .

这是个好方法。

vue v-for 图片不显示。相反，它显示字符串

vue v-for image not showing. instead it shows string

javascript

php

laravel

vue.js

v-for