Question

我正在尝试在DIV中输出图像，如：

<div style="background-image:url('{{ asset($radioProg->image)}}');

即使img似乎在我的uploads文件夹中正确上传，我可以在我的数据库中看到它，我仍然无法在我的视图中看到它！有什么帮助吗？

这是我的RadioController.php

public function store(Request $request)
{
    $this->validate($request, [
        'name' => 'required',
        'day' => 'required',
        'time' => 'required',
        'intro' => 'required',
        'link_streaming' => 'required',
        'image' => 'required|image|max:2000'
        ]);

    $radioProg = new RadioProg;
    $radioProg->name = $request->name;
    $radioProg->day = $request->day;
    $radioProg->time = $request->time;
    $radioProg->intro = $request->intro;
    $radioProg->link_streaming = $request->link_streaming;

    if ($request->hasFile('image')) {
        if ($request->file('image')->isValid()) {

            $img_name = $request->file('image')->getClientOriginalName();
            $temp_file = base_path() . 'uploads/radio_programs' . $img_name;
            $radioProg->image = $request->file('image')->move('uploads/radio_programs', $img_name);
        }
    }

    $radioProg->save();

    Session::flash('success', 'Tu nuevo programa de radio ha sido guardado correctamente!');

    return redirect()->route('admin.radio.index', [$radioProg->id]);
}

/**
 * Display the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function show($id)
{
    $radioProg = RadioProg::find($id);
    return view('radio.show')->with('radioProg', $radioProg);
}

/**
 * Show the form for editing the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function edit($id)
{   
    $radioProg = RadioProg::find($id);
    return view('radio.edit')->with('radioProg', $radioProg);
}

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function update(Request $request, $id)
{
    $radioProg = RadioProg::find($id);
    $this->validate($request, [
        'name' => 'required',
        'day' => 'required',
        'time' => 'required',
        'intro' => 'required',
        'link_streaming' => 'required',
        'image' => 'required|image|max:2000'
        ]);

    $radioProg->name = $request->input('name');
    $radioProg->day = $request->input('day');
    $radioProg->time = $request->input('time');
    $radioProg->intro = $request->input('intro');
    $radioProg->link_streaming = $request->input('link_streaming');

    if ($request->hasFile('image')) {
        if ($request->file('image')->isValid()) {

            $img_name = $request->file('image')->getClientOriginalName();
            $temp_file = base_path() . 'uploads/radio_programs' . $img_name;
            $radioProg->image = $request->file('image')->move('uploads/radio_programs', $img_name);

        }
    }


    $radioProg->save();

    Session::flash('success', 'Tu programa de radio ha sido modificado con éxito!');

    return redirect()->route('admin.radio.index', [$radioProg->id]);

}

这是我的观点：

<div class="row radio-programs">
    @foreach($radioProgs as $radioProg)
    <div class="col-md-4 {{ count($radioProgs) === 1 ? "col-md-offset-4" :""}} col-program">
        <div class="panel panel-default panel-program" style="background-image:url('{{ asset($radioProg->image)}}'); background-position: center; background-size: cover;-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12 col-inOverlay">
                        <h3 class="text-center"><span>{{$radioProg->name}}</span></h3>
                        <h4><span>Día: todos los {{$radioProg->day}} </span></h4>
                        <h4><span>Hora: {{$radioProg->time}} </span></h4>
                        <hr>
                        <div class="row button-program">
                            <div class="col-md-10 col-md-offset-1 col-button-program">
                                <a href="{{url('radioProgram')}}" type="button" class="btn btn-danger btn-block">Entrar</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

Chrome中的

我实际上看到了正确的路径！

<div class="panel panel-default panel-program" style="background-image:url('http://localhost:8000/uploads/radio_programs\administrador_consorcio_300115.png'); background-position: center; background-size: cover;-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;">

Answer 1

不是回答你的问题，而是更多的调试...

你说：

Chrome中的
我实际上看到了正确的路径！

您是否尝试检查使用background-image样式规则的chrome中的元素并查看它返回的图像？您甚至可以在新选项卡中打开图像。见图：

如果您仍然无法看到它，我认为可能路径不正确。

Answer 2

这样的改变可行： 之前添加（../)（ {{）

<div class="panel panel-default panel-program" style="background-image:url('../{{ asset($radioProg->image)}}'); background-position: center; background-size: cover;-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;">

无法在Laravel5.2视图中输出图像

2 个答案: