Images/css/js files not available on docker container

Question

I'm learning microservice concept and using Docker for these purposes. I have 3 containers:

mssqlserver - my database
asp-net-core:2.0 - for my microservice (only 1 at the moment)
asp-net-core:2.0 - MVC Connection exists between these so this isn't a cause of the problem. MVC contains wwwroot directory where images (banners etc.), css and .js files are placed. I've checked they are on my docker container (ran /bin/bash on container and checked). But somehow my .cshtml files can't see these files.

Dockerfile for MVC project:

FROM microsoft/aspnetcore-build:2.0 AS build-env
WORKDIR /app

# copy csproj and restore as distinct layers
COPY *.csproj ./
RUN dotnet restore

# copy everything else and build
COPY . ./

RUN dotnet publish -c Release -o out

# build runtime image
FROM microsoft/aspnetcore:2.0
WORKDIR /app
COPY --from=build-env /app/out .
EXPOSE 80/tcp
ENTRYPOINT ["dotnet", "MVC.dll"]

docker-compose:

version: "3.2"

networks:
  frontend:
  backend:


services:

  webmvc:
    build: 
      context: .\src\Web\MVC
      dockerfile: Dockerfile
    environment: 
      - ASPNETCORE_ENVIRONMENT=Development 
      - CatalogUrl=http://catalog
    container_name: webshop
    ports:
      - "5500:80"
    networks:
      - frontend 
    depends_on:
      - catalog

  catalog:
    build:
        context: .\src\Services\ProductCatalogApi
        dockerfile: Dockerfile
    image: microservices-v1.0.0
    environment:
        - DatabaseServer=mssqlserver
        - DatabaseName=CatalogDb
        - DatabaseUser=sa
        - DatabaseUserPassword=ProductApi(!)
    container_name: catalogapi
    ports:
        - "5000:80"
    networks:
        - backend
        - frontend
    depends_on:
        - mssqlserver

  mssqlserver:
    image: "microsoft/mssql-server-linux:latest"
    ports:
        - "2200:1433"
    container_name: mssqlcontainer
    environment:
        - ACCEPT_EULA=Y
        - SA_PASSWORD=ProductApi(!)
    networks:
        - backend

Example use of image (in Index.cshtml):

<img src="~/images/banner.jpg" alt="ASP.NET" class="img-responsive" />

I've tried differenet combination of path to image like:

<img src="wwwroot/images/banner.jpg" alt="ASP.NET" class="img-responsive" />
<img src="~/app/wwwroot/images/banner.jpg" alt="ASP.NET" class="img-responsive" />
<img src="app/wwwroot/images/banner.jpg" alt="ASP.NET" class="img-responsive" />

None of these worked.

Chris Pratt · Accepted Answer · 2019-07-31 14:54:06Z

1

Most likely you failed to enable the static files middleware in your ASP.NET Core project. In Startup.Configure, you need the line:

app.UseStaticFiles();

That will serve up wwwroot, by default, as the document root of your site, so you would then reference in static files under that via:

<img src="~/images/banner.jpg" />

Which would correspond to the file at wwwroot/images/banner.jpg.

answered Jul 31, 2019 at 14:54

Chris Pratt

240k37 gold badges414 silver badges468 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Images/css/js files not available on docker container

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related