Vue中的图像未显示

Question

我在Vue CLI项目中无法显示图像。

这就是我要做什么。这个vue文件访问一个json文件，其中包含对单个Eyewear对象的一些引用，所有这些都可以使用。我在json文件中引用了要尝试访问的图像。使用当前代码，我可以在浏览器中看到正确的图像参考，但是它不会加载图像。与webpack或其他需要加载图像文件的加载器有关吗？

    <template>
  <div>
    <h1 id='callout'>Select Your Eyewear</h1> 
    <div id='item' v-for='item in items' :key=item.id>
      <img :src='`..${item.images.frontal}`' alt='eyeware' />
      <ul id='itemLIist'>     
        <li >
          {{ item.brand }}
        </li>
        <li>
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import items from "../assets/eyewear.json";

export default {
  name: "ItemList",
  data: function() {
    return {
      items: items.eyewear
    };
  }
};
</script>

<style scoped>
</style>

Answer 1

我不知道这对您是否有用。但就我而言，提供图像的完整路径对我有效。在您的屏幕快照参考中，从“ ../assets”开始，而不是尝试“ src / assets”（不带点的完整路径）

为了简单起见，首先只需尝试将完整路径src硬编码为#initialize library(shiny) library(ggplot2) library(purrr) library(dplyr) library(plotly) #example data data(iris) #make some factors #easier to let ggplot2 control plotting (color, fill) based on type data(mtcars) uvals<-sapply(mtcars,function(x){length(unique(x))}) mtcars<-map_if(mtcars,uvals<4,as.factor) %>% as.data.frame() #plotting theme for ggplot2 .theme<- theme( axis.line = element_line(colour = 'gray', size = .75), panel.background = element_blank(), plot.background = element_blank() ) # UI for app ui<-(pageWithSidebar( # title headerPanel("Select Options"), #input sidebarPanel ( # Input: Select a file ---- fileInput("file1", "Choose xlsx File", multiple = TRUE, accept = c(".xlsx")), # Horizontal line ---- tags$hr(), #download button fluidPage(downloadButton('down')), # Input: Select what to display selectInput("dataset","Data:", choices =list(iris = "iris", mtcars = "mtcars", uploaded_file = "inFile"), selected=NULL), selectInput("xaxis","X axis:", choices = NULL), selectInput("yaxis","Y axis:", choices = NULL), selectInput("fill","Fill:", choices = NULL), selectInput("group","Group:", choices = NULL), selectInput("plot.type","Plot Type:", list(boxplot = "boxplot", histogram = "histogram", density = "density", bar = "bar") ), checkboxInput("show.points", "show points", TRUE) ), # output mainPanel( h3(textOutput("caption")), #h3(htmlOutput("caption")), uiOutput("plot") # depends on input ) )) # shiny server side code for each call server<-function(input, output, session){ #update group and #variables based on the data observe({ #browser() if(!exists(input$dataset)) return() #make sure upload exists var.opts<-colnames(get(input$dataset)) updateSelectInput(session, "xaxis", choices = var.opts) updateSelectInput(session, "yaxis", choices = var.opts) updateSelectInput(session, "fill", choices = var.opts) updateSelectInput(session, "group", choices = var.opts) }) output$caption<-renderText({ switch(input$plot.type, "boxplot" = "Boxplot", "histogram" = "Histogram", "density" = "Density plot", "bar" = "Bar graph") }) output$plot <- renderUI({ plotOutput("p") }) #get data object get_data<-reactive({ if(!exists(input$dataset)) return() # if no upload check<-function(x){is.null(x) || x==""} if(check(input$dataset)) return() obj<-list(data=get(input$dataset), yaxis=input$yaxis, xaxis=input$xaxis, fill=input$fill, group=input$group ) #require all to be set to proceed if(any(sapply(obj,check))) return() #make sure choices had a chance to update check<-function(obj){ !all(c(obj$yaxis,obj$xaxis, obj$fill,obj$group) %in% colnames(obj$data)) } if(check(obj)) return() obj }) p <- reactive({ plot.obj<-get_data() #conditions for plotting if(is.null(plot.obj)) return() #make sure variable and group have loaded if(plot.obj$yaxis == "" | plot.obj$xaxis =="" | plot.obj$fill ==""| plot.obj$group =="") return() #plot types plot.type<-switch(input$plot.type, "boxplot" = geom_boxplot(), "histogram" = geom_histogram(alpha=0.5,position="identity"), "density" = geom_density(alpha=.75), "bar" = geom_bar(position="dodge") ) if(input$plot.type=="boxplot") { #control for 1D or 2D graphs p<-ggplot(plot.obj$data, aes_string( x = plot.obj$xaxis, y = plot.obj$yaxis, fill = plot.obj$fill,# let type determine plotting group = plot.obj$group ) ) + plot.type if(input$show.points==TRUE) { p<-p+ geom_point(color='black',alpha=0.5, position = 'jitter') } } else { p<-ggplot(plot.obj$data, aes_string( x = plot.obj$xaxis, fill = plot.obj$fill, group = plot.obj$group #color = as.factor(plot.obj$group) ) ) + plot.type } p<-p+labs( fill = input$fill, x = "", y = input$yaxis ) + .theme print(p) }) #plotting function using ggplot2 output$p <- renderPlot({ p() }) # set uploaded file upload_data<-reactive({ inFile <- input$file1 if (is.null(inFile)) return(NULL) #could also store in a reactiveValues read_excel(inFile$datapath) }) observeEvent(input$file1,{ inFile<<-upload_data() }) # downloadHandler contains 2 arguments as functions, namely filename, content output$down <- downloadHandler( filename = function() { paste(input$dataset,"png" , sep=".") }, # content is a function with argument file. content writes the plot to the device content = function(file) { ggsave(file, p()) } ) } # Create Shiny app ---- shinyApp(ui, server) 标记，然后查看其是否有效。

，让我知道这是否适合您。 =）