Question

如果我使用硬编码路径可以正常工作，则无法通过vue上的file_path加载图像。参见下面的示例代码

JavaScript

df %>%
  dplyr::mutate(.data = .,
            label = dplyr::case_when(
              y == "a" ~ paste(list(
                "'This is'", "~alpha==", 1
              ), collapse = ""),
              y == "b" ~ paste(list(
                "'This is'", "~beta==", 2
              ), collapse = "")))
# A tibble: 10 x 3
#       x y     label             
#   <int> <fct> <chr>             
# 1     1 a     'This is'~alpha==1
# 2     2 a     'This is'~alpha==1
# 3     3 a     'This is'~alpha==1
# 4     4 a     'This is'~alpha==1
# 5     5 a     'This is'~alpha==1
# 6     6 b     'This is'~beta==2 
# 7     7 b     'This is'~beta==2 
# 8     8 b     'This is'~beta==2 
# 9     9 b     'This is'~beta==2 
#10    10 b     'This is'~beta==2

HTML

function getRestaurantsbyId(id) {
    var restaurants = {
        "1" : {
            "name": "xxxx",
            "description": "xxxxxxxxxx",
            "address": "xxxxxxxx",
            "contact_number": "rttttttttt"
            "cover_image": "images/clients/1/xxxxxx.jpeg"
        }
    };
    return restaurants[id];
}

var restaurant_info = new Vue({
    el: '#main',
    data: {
        info: getRestaurantsbyId(restaurant_id)
    }
})

根据网络上的其他解决方案，我尝试了以下操作。

<img src="{{ info.cover_image }}" class="respimg" alt="">

欢迎任何评论和建议。

Answer 1

首先，尝试在getRestaurantsbyId方法中调用created函数。

function getRestaurantsbyId(id) {
    var restaurants = {
        "1" : {
            "name": "xxxx",
            "description": "xxxxxxxxxx",
            "address": "xxxxxxxx",
            "contact_number": "rttttttttt"
            "cover_image": "images/clients/1/xxxxxx.jpeg"
        }
    };
    return restaurants[id];
}

var restaurant_info = new Vue({
    el: '#main',
    data: {
        info: {
          cover_image: null
        }
    },
    created: function() {
        this.info = getRestaurantsbyId(restaurant_id);
    }
})

在模板中，绑定到src时无需添加花括号

<img :src="info.cover_image" class="respimg" alt="">

Vue图像src文件路径不起作用

1 个答案: